cookie和Web Storage

什麼是cookie

cookie是由服務器生成，發送給User-Agent（通常是瀏覽器）的一小段文本信息，瀏覽器會將Cookie的key/value保存到某個目錄下的文本文件內，下次請求同一網站時就發送該cookie給服務器（前提是瀏覽器設置爲啓用cookie）。

當網頁要發http請求時，瀏覽器會先檢查是否有存儲相應的cookie，有則自動添加在request header中的cookie字段中，服務器就會將特定的網頁和操做數據返回給瀏覽器，從而記住用戶的操做，減小了重複添加操做。

通常來講，每一個域名下的cookie最大爲4KB，cookie數量最多爲20個（但不少瀏覽器廠商在具體實現時支持大於20個）。

cookie的操做

原生js獲取cookie的API：document.cookie，該值是一個鍵-值形式的字符串。鍵值對之間由一個分號和一個空格隔開。

cookie屬性

• expires：設置cookie在什麼時間內有效。必須是GMT格式的時間，能夠經過new Date().toGMTString()或new Date().toHTCString()來得到。若是沒有設置該屬性，則默認cookie在瀏覽器關閉以後就沒有了。

expires是http/1.0協議中的選項，在新的http/1.1協議中已經由max-age選項代替，區別在於一個設置「到什麼時間」，另外一個設置「持續多長時間」。max-age默認值是-1，即默認cookie在瀏覽器關閉以後就沒有了。

• domain和path：domain是域名，path是路徑，加起來構成URL，限制cookie能被哪些URL訪問。若是沒有設置，則domain默認是設置該cookie的網頁所在的域名，path默認是設置該cookie的網頁所在的目錄。

發生跨域xhr請求時，即時請求URL的域名和路徑都知足cookie的domain和path默認狀況下cookie也不會自動被添加到請求頭部中。

domain能夠設置爲頁面自己的域名，或頁面自己域名的父域，但不能是公共後綴。（例如www.baidu.com，domain能夠設置爲www.baodu.com，也能夠設置爲baidu.com，但不能設置爲.com或者com）

• secure：用來設置cookie只有在安全的時候才發送。（協議）安全時纔會被髮送到服務器。默認爲空（不設置），即都會被髮送到服務器。

要想在網頁中設置secure類型的cookie，必須保證網頁是https協議的。

• httpOnly：這個選項用來設置cookie是否能經過js去訪問。默認不帶httpOnly選項，即默認爲空。因此默認狀況下客戶端能夠訪問這個cookie。

在客戶端不能經過js來設置一個httpOnly類型的cookie，只能在服務器端設置。

設置cookie

在服務器端返回的response header中有一項叫set-cookie，是服務器專門用來設置cookie的。可是要注意不能將多個cookie設置在一個set-cookie字段中，須要分開設置。每一個cookie均可以設置全部的屬性選項。

Set-Cookie: ......
Set-Cookie: ......

客戶端經過document.cookie就能夠設置一個cookie，可是隻能設置cookie的下列選項：expires、domain、path、secure。客戶端設置多個cookie時也須要分開寫。

document.cookie = ...
document.cookie = ...

• 修改cookie：從新賦值（path/domain要與舊cookie一致）
• 刪除cookie：也是從新賦值，將新cookie的expires值設置爲過去的一個時間點。可是path/domain依然要和舊cookie保持一致，否則就只是新增而不是修改

什麼是Web Storage

Web Storage是一種存儲機制，經過這種存儲機制，瀏覽器能夠以一種比cookie更加直觀的方式安全地存儲key/value值。

Storage對象與普通對象類似，都使用key/value來存儲，可是他們在通過頁面從新加載以後保持不變。key和value一般都是字符串（注意整數的key一般會被轉換爲字符類型）。咱們能夠像使用對象同樣獲取這些值，如Storage.getItem()和Storage.setItem()方法。如下三種方式是同樣的：

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

如下是兩種Web Storage機制：

• sessionStorage：爲每個給定的源維持一個獨立的存儲區域，該存儲區域在頁面會話期間可用（即只要瀏覽器處於打開狀態，包括頁面從新加載和恢復）
• localStorage：與sessionStorage功能相同，可是在瀏覽器關閉以後，從新打開時數據仍然存在。

這兩種機制是經過Window.sessionStorage和window.localStorage屬性使用（更確切的說是在支持的瀏覽器中Window對象實現了WindowLocalStorage和WindowSessionStorage對象並掛在其localStorage和sessionStorage屬性下）--調用其中的任意一個會建立一個Storage對象的實例，經過這個實例能夠添加、檢索、刪除數據。可是調用sessionStorage和localStorage建立的是不一樣的Storage對象實例，他們獨立運行和控制。

Web Storage的操做

• Storage.getItem()：從存儲的數據中獲取一個數據段，key做爲該方法的參數，返回key對應的數據值。
• Storage.setItem()：建立新的數據值或者更新已經存在的數據值。該方法有兩個參數：key和相對應的value值。
• Storage(event)：當Storage對象發生改變時，storage時間就會被觸發。這個事件觸發後，同一頁面中的改變不會起做用，相同域名下的其餘頁面發生的改變纔會起做用。
• Storage.removeItem()：接收key值做爲參數，指僅僅刪除這一個數據項。
• Storage.clear()：不接收參數，會清空整個storage對象。

三者的異同

特性	Cookie	localStorage	sessionStorage
數據的生命期	可設置失效時間，默認是關閉瀏覽器後失效	除非被清除，不然永久保存	僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小	4KB	通常爲5MB
與服務器端通訊	每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
做用域	在全部同源窗口中是共享的	在全部同源窗口中是共享的	不在不一樣瀏覽器窗口中共享，即便是同一個頁面

參考資料

聊一聊cookie

Using the Web Storage API

詳說 Cookie, LocalStorage 與 SessionStorage