cookie、sessionStorage、localStorage

一：cookie

Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在

瞭解cookie

1. 要表示唯一的一個cookie值需要：name、domain、path

2. 一個cookie就是一個小型的文字檔案

3. 雖然cookie儲存在瀏覽器端，但是一般是在伺服器端設定的。

4. 可以在HTTP返回體裡，通過設定Set-Cookie來告訴瀏覽器端所要儲存的cookie。

5. 用來儲存客戶瀏覽器請求伺服器頁面的請求資訊

cookie相關欄位的說明

1. 名稱：一個唯一確定cookie的名稱。cookie名稱是不區分大小寫的。cookie的名稱必須是經過URL編碼的。

2. 值：儲存在cookie中的字串值。值必須被URL編碼。

3. 域：cookie對於哪個域是有效的。所有向該域傳送的請求中都會包含這個cookie資訊。如果沒有明確設定，那麼這個域會被認作來自設定cookie的那個域。

4. 路徑：對於指定域中的那個路徑，應該向伺服器傳送cookie。例如，你可以指定cookie只有從http://www.wrox.com/books/中才能訪問，那麼http://www.wrox.com的頁面就不會傳送cookie資訊，即使請求都是來自同一個域的。

5. 失效時間：表示cookie何時應該被刪除的時間戳（也就是，何時應該停止向伺服器傳送這個cookie）。預設情況下，瀏覽器會話結束時即將所有cookie刪除；不過也可以自己設定刪除時間。這個值是個GMT格式的日期（Wdy,DD-Mon-YYYY HH:MM:SSGMT），用於指定應該刪除cookie的準確時間。因此，cookie可在瀏覽器關閉後依然儲存在使用者的機器上。如果你設定的失效日期是個以前的時間，則cookie會被立刻刪除。

6. 安全標誌：指定後，cookie只有在使用SSL連線的時候才傳送到伺服器。例如，cookie資訊只能傳送給 https://www.wrox.com，而http://www.wrox.com的請求則不能傳送 cookie。

cookie的應用場景

• 簡單來說，Cookie就是伺服器暫存放在你的電腦裡的資料（.txt格式的文字檔案），好讓伺服器用來辨認你的計算機。當你在瀏覽網站的時候，Web伺服器會先送一小小資料放在你的計算機上，Cookie 會把你在網站上所打的文字或是一些選擇都記錄下來。當下次你再訪問同一個網站，Web伺服器會先看看有沒有它上次留下的Cookie資料，有的話，就會依據Cookie裡的內容來判斷使用者，送出特定的網頁內容給你。

• 網站可以利用cookie跟蹤統計使用者訪問該網站的習慣，比如什麼時間訪問，訪問了哪些頁面，在每個網頁的停留時間等。利用這些資訊，一方面是可以為使用者提供個性化的服務，另一方面，也可以作為了解所有使用者行為的工具，對於網站經營策略的改進有一定參考價值。

• 目前Cookie最廣泛的是記錄使用者登入資訊，這樣下次訪問時可以不需要輸入自己的使用者名稱、密碼了——當然這種方便也存在使用者資訊洩密的問題，尤其在多個使用者共用一臺電腦時很容易出現這樣的問題。

設定／修改 cookie

cookie的原生的API，需要我們自己進行封裝

//直接複製 【直接複製不是覆蓋，而是追加】
document.cookie = 'name=value;'

//封裝setCookie方法
//setCookie 首先對name和value進行編碼
function setCookie(name,value,expires,path,domain,secure){

    var cookie = encodeURIComponent(name)+ '=' +encodeURIComponent(value);
    
    //注意分號後面要有空格
    //後面的4個引數是可選的，所以用if判斷並追加
     
    if(expires){
        cookie +='; expires='+expires.toGMTString();
    }
    if(path){
        cookie += '; path='+path;
    }
    if(domain){
        cookie += '; domain='+domain;
    }
    if(secure){
        cookie += '; secure='+secure;
    }
    document.cookie = cookie;
}
複製程式碼

刪除cookie

輸入引數為name、path、domain 這3個是唯一標識cookie的,將max-age設定為0，就可以立即刪除了.

function remove(name,domain,path){
    document.cookie = 'name='+name
                    +'; domain='+domain
                    +'; path='+path
                    +'; max-age=0';
}
複製程式碼

cookie缺點

• Cookie數量和長度的限制。IE6或更低版本每個domian下最多20個cookie，IE7和之後的版本最多可以有 50個cookie，Firefox最多50個cookie，chrome和Safari沒有做硬性限制，每個cookie長度不能超過4KB，否則會被截掉。

• IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。這就導致不能永久儲存資訊。

• 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。

• 並且每次你請求一個新的頁面的時候，cookie只要滿足作用域和作用路徑，Cookie都會被髮送過去，這樣無形中浪費了頻寬。

二：本地儲存

Web Storage是為了在本地“儲存”資料而生。html5中的 Web Storage 包括了兩種儲存方式：sessionStorage和localStorage

localStorage && sessionStorage：只要有效期和作用域，瀏覽器每次訪問的時候都會將Storage載入到記憶體裡。

• localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。

• sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。也就是說只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後，sessionStorage即被銷燬

• localStorage也受同源策略的限制。

• localStorage和sessionStorage都具有相同的操作方法，如setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。

三：區別