隨著web應(yīng)用程序的出現(xiàn)，也產(chǎn)生了對于能夠在客戶端上存儲用戶信息能力的要求。這個問題的第一個解決方案是以cookie形似出現(xiàn)的。網(wǎng)景公司在一份名為“Persistent Client State: HTTP Cookies”的標(biāo)準(zhǔn)中對cookie機(jī)制進(jìn)行了闡述。

cookie限制：

每個域的cookie個數(shù)是有限的，ie7之后是每個域30個，firefox是50個，chrome和safari沒有限制

當(dāng)超過單個域名cookie限制后，還要設(shè)置cookie，瀏覽器就會清除前的cookie；ie和opera會刪除最近最少使用過的cookie；firefox的刪除并沒有規(guī)律

單個cookie的容量也有限制，每個至多4kb，超過4kb這個cookie會無聲消失掉。

cookie的構(gòu)成：

名稱：一個唯一確定cookie的名稱。cookie的名稱必須是經(jīng)過url編碼的

值：存儲在cookie中字符串值。值必須被url編碼

域：cookie對于哪個域是有效的。所有向該域發(fā)送的請求都會包含這個cookie信息。這個值可以包含子域：www.wrox.com也可以不包含子域：.wrox.com

路徑：指定對于域中的那個路徑，應(yīng)該向服務(wù)器發(fā)送cookie。

失效時間：表示cookie何時應(yīng)該被刪除的時間戳。默認(rèn)情況下，瀏覽器回話結(jié)束時即將所有cookie刪除；如果設(shè)置過期時間，cookie可在瀏覽器關(guān)閉后依然保存在用戶的機(jī)器上。

安全標(biāo)志：指定后，cookie只有在使用SSL連接的時候才能發(fā)送到服務(wù)器。

尤其注意：域、路徑、失效時間和secure標(biāo)志都是服務(wù)器給瀏覽器的指示，以指定何時應(yīng)該發(fā)送cookie。這些參數(shù)并不會作為發(fā)送到服務(wù)器的cookie信息的一部分，只有名值對才會被發(fā)送。

document.cookie瀏覽器提供的用來訪問和設(shè)置cookie。這個屬性的特殊之處在于因為使用它的方式不同而表現(xiàn)出不同的行為：

當(dāng)用來獲取屬性時，document.cookie返回當(dāng)前頁面可用的（根據(jù)域、路徑、失效時間和安全設(shè)置）所有cookie的字符串，一系列由分號隔開的鍵值對："nam1=value1;name2=value2;name3=value3"注意最后沒有分號

當(dāng)用于設(shè)置值的時候，document.cookie屬性可以設(shè)置為一個新的cookie字符串。這個cookie字符串會被解釋并添加到現(xiàn)有的cookie集合中。除非cookie名已經(jīng)存在，否則設(shè)置document.cookie并不會覆蓋cookie。：document.cookie=encodeURIComponent(name) "=" encodeURIComponent(value) "; domain=.wrox.com; path=/";

WebStorage

webStorage的目的是克服由cookie帶來的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時，無需持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。Web Storage的兩個主要目的：

提供一種在cookie之外存儲會話數(shù)據(jù)的途徑；

提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制；

Storage類型

Storage類型提供最大的存儲空間來存儲鍵值對兒。Storage的實(shí)例主要常用以下方法：

getItem(name)：根據(jù)指定的名字name獲取對應(yīng)的值

removeItem(name)：刪除由name指定的鍵值對兒

setItem(name)：位指定的name設(shè)置一個對應(yīng)值

還可以使用length屬性來判斷有多少鍵值對存放在Storage對象中。

localStorage對象

要訪問同一個localStorage對象，頁面必須來自同一個域（子域名無效），使用同一協(xié)議，在同一窗口上。

存儲在localStorage中的數(shù)據(jù)保留到通過JavaScript刪除或者是用戶清除瀏覽器緩存。

storage事件

對storage對象進(jìn)行任何修改，都會在文檔上觸發(fā)storage事件。

document.addEventListener('storage', function(evt){});