摘要：有兩種實(shí)現(xiàn)，一個(gè)是，一個(gè)是。作用域的作用域是限定在文檔源級(jí)別的，不同的文檔源之間是不能讀取和修改對(duì)方的數(shù)據(jù)的，而相同的文檔源是可以的。當(dāng)?shù)闹党隽耍祷?。除非用戶要求刪掉數(shù)據(jù)，或者存儲(chǔ)空間不足，或者處于完全原因。

如有不當(dāng)之處，歡迎指出，如需轉(zhuǎn)載，請(qǐng)注明出處

本文一共分為兩章。

第一章講Web Storage的使用，目標(biāo)是讓大家看完第一章后基本能應(yīng)對(duì)80%的使用場(chǎng)景。

第二章會(huì)講一些Web Storage的進(jìn)階知識(shí)，包括一些標(biāo)準(zhǔn)，沒有太多看的必要，但是也會(huì)有點(diǎn)小用。

還有，這是一篇推Web Storage的文章，所以也不給大家掛Cookie相關(guān)的鏈接或者教程，也不去多講Cookie了，就是這么任性，哼╭(╯^╰)╮！

當(dāng)一個(gè)新的技術(shù)出現(xiàn)時(shí)（已經(jīng)不新了=。=），我們都會(huì)想知道：這個(gè)技術(shù)的出現(xiàn)是為了解決什么問題的？所以，Web Storage的出現(xiàn)又是為了解決什么問題咧？

顧名思義，Web Storage的出現(xiàn)就是為了解決客戶端數(shù)據(jù)存儲(chǔ)問題的。那有人就問了，存儲(chǔ)不是有Cookie, userData, Flash等等解決方案嗎？需要這個(gè)Web Storage嗎？

其實(shí)Web Storage的出現(xiàn)是為了克服Cookie的一些限制，如果你的數(shù)據(jù)不需要服務(wù)端處理，只需要存儲(chǔ)在客戶端，根本就不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器（Cookie會(huì)跟在每次HTTP請(qǐng)求里）。Web Storage的兩個(gè)主要目標(biāo)是：

提供一種在Cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的途徑

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

所以，雖然現(xiàn)在的技術(shù)方案確實(shí)能解決很多存儲(chǔ)問題，但是，既然出現(xiàn)了這么個(gè)新的東西，肯定也是有它存在的意義的，我們不妨深入的了解和嘗試一下，說不定就會(huì)發(fā)現(xiàn)還是挺好用的。

目前的情況是Cookie和localStorage用的比較多，我們也可以嘗試用sessionStorage做一些Cookie現(xiàn)在做的事情。

既然要使用它，那我們首先要知道各大瀏覽器對(duì)它的支持情況，如果滿足業(yè)務(wù)需要，那我們就可以放心大膽的用了。

從上面的圖可以看出來，桌面瀏覽器只有IE7及以下不支持Web Storage。

移動(dòng)端瀏覽器除了Opera Mini不支持外，其他都是支持的

數(shù)據(jù)來源: caniuse.com

綜合以上的信息，Web Storage的兼容性其實(shí)是很好的，基本可以放心大膽的用它了。（如果你的項(xiàng)目需要兼容IE7及以下，可以考慮用userData代替，本文不展開介紹Web Storage以外的知識(shí)）。

我們已經(jīng)確定了Web Storage可用了，現(xiàn)在可以具體的講講它的使用。Web Storage有兩種實(shí)現(xiàn)，一個(gè)是localStorage，一個(gè)是sessionStorage。在講它們之前我們先解釋一個(gè)概念：文檔源。

文檔源是通過協(xié)議，主機(jī)名，端口來確定的。如圖：

只要有任何一項(xiàng)不同，它們就是非同源文檔，下面的每個(gè)URL都有不同的文檔源：

http://www.example.com        // 協(xié)議：http; 主機(jī)名：www.example.com
https://www.example.com       // 不同協(xié)議
http://static.example.com     // 不同主機(jī)名
http://www.example.com:8000   // 不同端口

參考鏈接：MDN-瀏覽器的同源策略

localStorage是用來做永久性存儲(chǔ)的。

localStorage里的數(shù)據(jù)的時(shí)效是永久的！只要你不刪，它就一直在那。除非web應(yīng)用需要?jiǎng)h除或者用戶需要刪掉它。

localStorage的作用域是限定在文檔源級(jí)別的，
不同的文檔源之間是不能讀取和修改對(duì)方的數(shù)據(jù)的，而相同的文檔源是可以的。但是不同的瀏覽器是不共享Storage的，也就是說你在Chorme瀏覽器里存的數(shù)據(jù)，在Firefox里是訪問不到的，即使它們是同一文檔源。

sessionStorage是用來做臨時(shí)性存儲(chǔ)的。

sessionStorage的時(shí)效只存在于標(biāo)簽頁存在的時(shí)間，一旦標(biāo)簽被關(guān)閉了，sessionStorage存儲(chǔ)的數(shù)據(jù)也會(huì)被刪除掉。

sessionStorage的作用域同樣是限定在文檔源級(jí)別的，不僅如此，它還被限制在標(biāo)簽頁中，不同標(biāo)簽頁的同一個(gè)頁面擁有各自的sessionStorage，數(shù)據(jù)不能共享。如果是一個(gè)頁面里有兩個(gè)