摘要：有兩種實現，一個是，一個是。作用域的作用域是限定在文檔源級別的，不同的文檔源之間是不能讀取和修改對方的數據的，而相同的文檔源是可以的。當的值超出了，返回。除非用戶要求刪掉數據，或者存儲空間不足，或者處于完全原因。

如有不當之處，歡迎指出，如需轉載，請注明出處

本文一共分為兩章。

第一章講Web Storage的使用，目標是讓大家看完第一章后基本能應對80%的使用場景。

第二章會講一些Web Storage的進階知識，包括一些標準，沒有太多看的必要，但是也會有點小用。

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

當一個新的技術出現時（已經不新了=。=），我們都會想知道：這個技術的出現是為了解決什么問題的？所以，Web Storage的出現又是為了解決什么問題咧？

顧名思義，Web Storage的出現就是為了解決客戶端數據存儲問題的。那有人就問了，存儲不是有Cookie, userData, Flash等等解決方案嗎？需要這個Web Storage嗎？

其實Web Storage的出現是為了克服Cookie的一些限制，如果你的數據不需要服務端處理，只需要存儲在客戶端，根本就不需要持續的將數據發回服務器（Cookie會跟在每次HTTP請求里）。Web Storage的兩個主要目標是：

提供一種在Cookie之外存儲會話數據的途徑

提供一種存儲大量可以跨會話存在的數據的機制

所以，雖然現在的技術方案確實能解決很多存儲問題，但是，既然出現了這么個新的東西，肯定也是有它存在的意義的，我們不妨深入的了解和嘗試一下，說不定就會發現還是挺好用的。

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

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

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

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

數據來源: caniuse.com

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

我們已經確定了Web Storage可用了，現在可以具體的講講它的使用。Web Storage有兩種實現，一個是localStorage，一個是sessionStorage。在講它們之前我們先解釋一個概念：文檔源。

文檔源是通過協議，主機名，端口來確定的。如圖：

只要有任何一項不同，它們就是非同源文檔，下面的每個URL都有不同的文檔源：

http://www.example.com        // 協議：http; 主機名：www.example.com
https://www.example.com       // 不同協議
http://static.example.com     // 不同主機名
http://www.example.com:8000   // 不同端口

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

localStorage是用來做永久性存儲的。

localStorage里的數據的時效是永久的！只要你不刪，它就一直在那。除非web應用需要刪除或者用戶需要刪掉它。

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

sessionStorage是用來做臨時性存儲的。

sessionStorage的時效只存在于標簽頁存在的時間，一旦標簽被關閉了，sessionStorage存儲的數據也會被刪除掉。

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