Web Storage是Html5引入的一個非常重要的功能，可以在客戶端本地存儲數據，類似Html4的cookie，但可實現功能要比cookIE強大的多。
在Web Storage出現之前，遠程的Web服務器需要存儲客戶端和服務器間交互使用的所有相關數據。cookIE是一個在服務器和客戶端間來回傳送文本值的內 置機制。服務器可以基於其放在cookie中的數據在不同web頁面間跟蹤用戶的信息。用戶每次訪問某個域是，cookIE數據都會被來回傳送。
盡管cookIE無處不在，但它還是有一些總所周知的缺點：
1）cookie的大小受限制，cookIE大小被限制在4KB，不能接受像文件或郵件那樣的大數據。
2）只要有請求涉及cookie，cookIE就 要在服務器和浏覽器之間來回傳送（這解釋為什麼本地文件不能測試cookie）。一方面，這意味著cookie數據在網絡上是可見的，不加密的情況下有安 全風險；另一方面，無論加載哪個相關url，cookIE中的數據都會消耗網絡帶寬。
Web Storage出現之後，開發者可以將需要跨請求重復訪問的數據直接存儲在客戶端的浏覽器中（開發者也可以將數據存儲在Javascript對象中，對象在頁面加載時保存，並且容易獲取），還可以在關閉浏覽器很久之後再次打開時恢復數據，以減少網絡流量。
Web Storage又分為兩種：
sessionStorage
localStorage
key和value都必須為字符串，換言之，web Storage的API只能操作字符串。
Web Storage API檢查浏覽器的支持性
檢測window.sessionStorage和window.localStorage是否存在
設置和獲取數據
sessionStorage.setItem("myFirstKey","myFirstValue");或者sessionStorage.myFirstKey = myFirstValue;或者sessionStorage["myFirstKey"] ="myFirstValue";
獲取數據
sessionStorage.getItem("myFirstKey");
刪除數據
sessionStorage.removeItem("myFirstKey");
刪除存儲列表中的所有數據
sessionStorage.clear();
設置和獲取的調用不必要出現在同一個網頁上，只要 網頁是同源的（規則、主機和端口）基於相同的鍵，我們都能夠在其他網頁中獲取設置在sessionStorage。大部分開發者對頁面重新加載時丟失腳本 數據的問題已經習以為常，但是通過Web Storage API保存的數據在重新加載頁面之後數據仍然存在。
當用戶關閉窗口或浏覽器，sessionStorage數據將會被清除
localStorage
localStorage 和sessionStorage的區別在於訪問它們的名稱不同，分別是通過localStorage 和sessionStorage對象來訪問它們，兩者的行為上的差異主要是數據的保存時長及它們的共享方式。
sessionStorage localStorage數據會保存在存儲它的窗口或標簽頁關閉時
（浏覽器刷新時可以存儲數據，浏覽器關閉時不可以）
數據的生命期比窗口或浏覽器的生命期長 數據只在構建它們的窗口或者標簽頁內可見 數據可被同源的每個窗口或者標簽頁共享將數據存儲在本地客戶端，進而從本地而不是遠程獲取數據，即可以降低網絡流量，又可提升浏覽器的響應速度。
一個困擾開發人員的常用問題是，當用戶從應用程序的一個頁面切換到另外一個頁面時如何管理數據。傳統的實現方法是有服務器存儲數據，當用戶在網頁間切換時來回傳遞數據。還有一種做法是應用程序盡可能讓用戶停留在一個動態更新的網頁上。不過用戶更喜歡在頁面間切換。
演示地址：http://lovermap.sinaapp.com/test/storage.Html
JSON對象的存儲
雖然Html5 Web Storage規范允許將任意類型的對象保存為鍵-值對形式。實際情況是一些浏覽器將數據限定為文本字符串類型。現代浏覽器原生支持JSON。我們可以通過序列化復雜對象將JSON數據保存到Storage中，以實現復雜數據類型的持久化。
var data;
function loadData(){
data = JSON.parse(sessonStorage['myStorage']);
}
function saveData(){
sessonStorage['myStorage'] = JSON.stringify(data);//對象轉變成字符串
}
window.addEventListener("load",loadData,true);
window.addEventListener("unload",loadData,true);