在近期開發的項目中，分別使用到了HTML5的 sessionStorage 和 localStorage，特此做下梳理。
sessionStorage 和 localStorage 是 Web Storage API 提供的存儲機制，通過該機制，瀏覽器可以安全地存儲鍵值對，比使用 cookie 更加直觀。cookie 因為沒有具體的使用過，故不多加贅述，大概知道的就是，cookie 一般由服務器生成，可設置失效時間。如果在瀏覽器端生成Cookie，默認是關閉瀏覽器后失效。cookie存放的數據限制在4K左右。
sessionStorage 和 localStorage 的區別
sessionStorage: 數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。在新標簽或窗口打開一個頁面會初始化一個新的會話。
localStorage: 存儲的數據沒有過期時間設置，除非你手動去清除，比如瀏覽器清緩存，用 js 方法清除數據等。
應該注意的是，無論是 localStorage 還是 sessionStorage 中保存的數據都僅限于該同一域名的協議。
Web Storage 的操作方法
Storage.setItem()
創建新數據項和更新已存在的值。該方法接受兩個參數——要創建/修改的數據項的鍵，和對應的值。
localStorage.setItem('myName', 'jane');
可以在chrome的開發者工具中查看存儲情況：
Storage.getItem()
從存儲中獲取一個數據項。該方法接受數據項的鍵作為參數，并返回數據值
console.log(localStorage.getItem('myName')) // jane
Storage.removeItem()
接受一個參數——你想要移除的數據項的鍵，然后會將對應的數據項從域名對應的存儲對象中移除。
Storage.clean()
不接受參數，只是簡單地清空域名對應的整個存儲對象。
點操作和[]的方式操作
因為 web Storage 是一個鍵值對象，故不但可以用自身提供的操作方法，也可以像普通對象一樣用點(.)操作符，及[]的方式進行數據存儲。
localStorage.myAge = 18;
localStorage['myNationality'] = 'China';
Storage.key() 和 Storage.length
可以實現對存儲數據的遍歷
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 響應存儲的變化
為 window 對象添加了一個事件監聽器,在當前域名不同頁面的localStorage對象發生改變時該事件監聽器會觸發。
window.addEventListener('storage', function(e) {
console.log('storage改變啦~')
});
Web Storage 的幾個常用檢測方法
檢測瀏覽器是否支持
if(window.localStorage){
alert("瀏覽支持localStorage")
}else{
alert("瀏覽暫不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
alert("瀏覽暫不支持localStorage")
}
檢測本地存儲是否已被填充（頁面是否被訪問過）
if(!localStorage.getItem('xxx')) {
// 已被填充
} else {
// 未被填充
}
Web Storage 的使用場景
個人認為，只要存儲的數據不敏感（不擔心被修改），不會太大（超出存儲容量），可以用 Web Storage 解決的情況都可以使用。
常見于表單用于優化用戶體驗等。
具體使用 sessionStorage 還是 localStorage 要視項目需求而定。
Web Storage 的存儲容量
各瀏覽器的存儲容量上限不同，可在這里測試瀏覽器的存儲容量。
Web Storage 的瀏覽器兼容性
主流瀏覽器都能很好的支持，這里主要對IE做下說明，可兼容到IE8。
參考資料
使用 Web Storage API
詳說 Cookie, LocalStorage 與 SessionStorage
HTMl5的sessionStorage和localStorage
