概述
這個(gè)API的作用是洁闰，使得網(wǎng)頁(yè)可以在瀏覽器端儲(chǔ)存數(shù)據(jù)帖努。它分成兩類：sessionStorage和localStorage梢薪。
sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話予借，當(dāng)會(huì)話結(jié)束（通常是該窗口關(guān)閉），數(shù)據(jù)被清空咸灿；localStorage保存的數(shù)據(jù)長(zhǎng)期存在构订，下一次訪問(wèn)該網(wǎng)站的時(shí)候，網(wǎng)頁(yè)可以直接讀取以前保存的數(shù)據(jù)避矢。除了保存期限的長(zhǎng)短不同悼瘾，這兩個(gè)對(duì)象的屬性和方法完全一樣囊榜。
它們很像cookie機(jī)制的強(qiáng)化版，能夠動(dòng)用大得多的存儲(chǔ)空間亥宿。目前卸勺，每個(gè)域名的存儲(chǔ)上限視瀏覽器而定，Chrome是2.5MB烫扼，F(xiàn)irefox和Opera是5MB曙求，IE是10MB。其中映企，F(xiàn)irefox的存儲(chǔ)空間由一級(jí)域名決定悟狱，而其他瀏覽器沒(méi)有這個(gè)限制。也就是說(shuō)堰氓，在Firefox中挤渐，[a.example.com](http://a.example.com/)和[b.example.com](http://b.example.com/)共享5MB的存儲(chǔ)空間。另外双絮，與Cookie一樣浴麻，它們也受同域限制。某個(gè)網(wǎng)頁(yè)存入的數(shù)據(jù)囤攀，只有同域下的網(wǎng)頁(yè)才能讀取软免。
通過(guò)檢查window對(duì)象是否包含sessionStorage和localStorage屬性，可以確定瀏覽器是否支持這兩個(gè)對(duì)象焚挠。
function checkStorageSupport() { // sessionStorage if (window.sessionStorage) { return true; } else { return false; } // localStorage if (window.localStorage) { return true; } else { return false; }}
操作方法
存入/讀取數(shù)據(jù)
sessionStorage和localStorage保存的數(shù)據(jù)膏萧，都以“鍵值對(duì)”的形式存在。也就是說(shuō)蝌衔，每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值向抢。所有的數(shù)據(jù)都是以文本格式保存。
存入數(shù)據(jù)使用setItem方法胚委。它接受兩個(gè)參數(shù)，第一個(gè)是鍵名叉信，第二個(gè)是保存的數(shù)據(jù)亩冬。
sessionStorage.setItem("key","value");localStorage.setItem("key","value");
讀取數(shù)據(jù)使用getItem方法。它只有一個(gè)參數(shù)硼身，就是鍵名硅急。
var valueSession = sessionStorage.getItem("key");var valueLocal = localStorage.getItem("key");
清除數(shù)據(jù)
removeItem方法用于清除某個(gè)鍵名對(duì)應(yīng)的數(shù)據(jù)。
sessionStorage.removeItem('key');localStorage.removeItem('key');
clear方法用于清除所有保存的數(shù)據(jù)佳遂。
sessionStorage.clear();localStorage.clear();
遍歷操作
利用length屬性和key方法营袜，可以遍歷所有的鍵。
for(var i = 0; i < localStorage.length; i++){ console.log(localStorage.key(i));}
其中的key方法丑罪，根據(jù)位置（從0開始）獲得鍵值荚板。
localStorage.key(1);
storage事件
當(dāng)儲(chǔ)存的數(shù)據(jù)發(fā)生變化時(shí)凤壁，會(huì)觸發(fā)storage事件。我們可以指定這個(gè)事件的回調(diào)函數(shù)跪另。
window.addEventListener("storage",onStorageChange);
回調(diào)函數(shù)接受一個(gè)event對(duì)象作為參數(shù)拧抖。這個(gè)event對(duì)象的key屬性，保存發(fā)生變化的鍵名免绿。
function onStorageChange(e) { console.log(e.key); }
除了key屬性唧席，event對(duì)象的屬性還有三個(gè)：
- oldValue：更新前的值。如果該鍵為新增加嘲驾，則這個(gè)屬性為null淌哟。
- newValue：更新后的值。如果該鍵被刪除辽故，則這個(gè)屬性為null徒仓。
- url：原始觸發(fā)storage事件的那個(gè)網(wǎng)頁(yè)的網(wǎng)址。
值得特別注意的是榕暇，該事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁(yè)面觸發(fā)蓬衡。如果瀏覽器同時(shí)打開一個(gè)域名下面的多個(gè)頁(yè)面，當(dāng)其中的一個(gè)頁(yè)面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)彤枢，其他所有頁(yè)面的storage事件會(huì)被觸發(fā)狰晚，而原始頁(yè)面并不觸發(fā)storage事件〗煞龋可以通過(guò)這種機(jī)制壁晒，實(shí)現(xiàn)多個(gè)窗口之間的通信。所有瀏覽器之中业栅，只有IE瀏覽器除外秒咐，它會(huì)在所有頁(yè)面觸發(fā)storage事件。
參考鏈接
- Ryan Stewart碘裕，Introducing the HTML5 storage APIs
- Getting Started with LocalStorage
- Feross Aboukhadijeh, Introducing the HTML5 Hard Disk Filler API
- Ben Summers, Inter-window messaging using localStorage
- Stack Overflow, Why does Internet Explorer fire the window “storage” event on the window that stored the data?
