在近期開發(fā)的項(xiàng)目中，分別使用到了HTML5的 sessionStorage 和 localStorage乒裆，特此做下梳理。
sessionStorage 和 localStorage 是 Web Storage API 提供的存儲機(jī)制匣沼，通過該機(jī)制泉唁，瀏覽器可以安全地存儲鍵值對，比使用 cookie 更加直觀吴趴。cookie 因?yàn)闆]有具體的使用過漆诽，故不多加贅述，大概知道的就是锣枝，cookie 一般由服務(wù)器生成厢拭，可設(shè)置失效時(shí)間。如果在瀏覽器端生成Cookie撇叁，默認(rèn)是關(guān)閉瀏覽器后失效供鸠。cookie存放的數(shù)據(jù)限制在4K左右。
sessionStorage 和 localStorage 的區(qū)別
sessionStorage: 數(shù)據(jù)在頁面會話結(jié)束時(shí)會被清除税朴。頁面會話在瀏覽器打開期間一直保持回季，并且重新加載或恢復(fù)頁面仍會保持原來的頁面會話。在新標(biāo)簽或窗口打開一個(gè)頁面會初始化一個(gè)新的會話正林。
localStorage: 存儲的數(shù)據(jù)沒有過期時(shí)間設(shè)置泡一，除非你手動(dòng)去清除，比如瀏覽器清緩存觅廓，用 js 方法清除數(shù)據(jù)等鼻忠。
應(yīng)該注意的是，無論是 localStorage 還是 sessionStorage 中保存的數(shù)據(jù)都僅限于該同一域名的協(xié)議杈绸。
Web Storage 的操作方法
Storage.setItem()
創(chuàng)建新數(shù)據(jù)項(xiàng)和更新已存在的值帖蔓。該方法接受兩個(gè)參數(shù)——要?jiǎng)?chuàng)建/修改的數(shù)據(jù)項(xiàng)的鍵，和對應(yīng)的值瞳脓。
localStorage.setItem('myName', 'jane');
可以在chrome的開發(fā)者工具中查看存儲情況：
Storage.getItem()
從存儲中獲取一個(gè)數(shù)據(jù)項(xiàng)塑娇。該方法接受數(shù)據(jù)項(xiàng)的鍵作為參數(shù)，并返回?cái)?shù)據(jù)值
console.log(localStorage.getItem('myName')) // jane
Storage.removeItem()
接受一個(gè)參數(shù)——你想要移除的數(shù)據(jù)項(xiàng)的鍵劫侧，然后會將對應(yīng)的數(shù)據(jù)項(xiàng)從域名對應(yīng)的存儲對象中移除埋酬。
Storage.clean()
不接受參數(shù)哨啃，只是簡單地清空域名對應(yīng)的整個(gè)存儲對象。
點(diǎn)操作和[]的方式操作
因?yàn)?web Storage 是一個(gè)鍵值對象写妥，故不但可以用自身提供的操作方法拳球，也可以像普通對象一樣用點(diǎn)(.)操作符，及[]的方式進(jìn)行數(shù)據(jù)存儲珍特。
localStorage.myAge = 18;
localStorage['myNationality'] = 'China';
Storage.key() 和 Storage.length
可以實(shí)現(xiàn)對存儲數(shù)據(jù)的遍歷
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
通過 StorageEvent 響應(yīng)存儲的變化
為 window 對象添加了一個(gè)事件監(jiān)聽器,在當(dāng)前域名不同頁面的localStorage對象發(fā)生改變時(shí)該事件監(jiān)聽器會觸發(fā)祝峻。
window.addEventListener('storage', function(e) {
console.log('storage改變啦~')
});
Web Storage 的幾個(gè)常用檢測方法
檢測瀏覽器是否支持
if(window.localStorage){
alert("瀏覽支持localStorage")
}else{
alert("瀏覽暫不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
alert("瀏覽暫不支持localStorage")
}
檢測本地存儲是否已被填充（頁面是否被訪問過）
if(!localStorage.getItem('xxx')) {
// 已被填充
} else {
// 未被填充
}
Web Storage 的使用場景
個(gè)人認(rèn)為，只要存儲的數(shù)據(jù)不敏感（不擔(dān)心被修改）扎筒，不會太大（超出存儲容量）莱找，可以用 Web Storage 解決的情況都可以使用。
常見于表單用于優(yōu)化用戶體驗(yàn)等砸琅。
具體使用 sessionStorage 還是 localStorage 要視項(xiàng)目需求而定宋距。
Web Storage 的存儲容量
各瀏覽器的存儲容量上限不同，可在這里測試瀏覽器的存儲容量症脂。
Web Storage 的瀏覽器兼容性
主流瀏覽器都能很好的支持谚赎，這里主要對IE做下說明，可兼容到IE8诱篷。
參考資料
使用 Web Storage API
詳說 Cookie, LocalStorage 與 SessionStorage
HTMl5的sessionStorage和localStorage
