html5 web storage

Web Storage API Differences

參考資料：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

client storage	有效範圍	過時時間	值類型	兼容性	服務端訪問性	大小
cookie	同源共享	默認是會話時長， 可設置	string	all	自動回傳，服務器可操做	4k 左右
sessionStorage	同一個標籤頁（注意，和session的同瀏覽器共享不一樣）	標籤頁或瀏覽器關閉	string	ie8+	不可訪問	5m 左右，瀏覽器差距較大
localStorage	同源的每一個窗口和標籤頁	永久	string	ie8+	不可訪問	5m 左右，瀏覽器差距較大

使用的時候根據各項特色結合使用場景來選擇合適的存儲介質

例子：

同時打開預訂機票的2個標籤頁A和B， 選擇不一樣的出發日期做對比 A： 2016-10-1；B：2016-10-3，若是用cookie來存儲選中日期； 因爲cookie的可訪問範圍比sessionStorage大 ，那麼在標籤頁A提交訂單的時候，訂單的出發日期就極可能是B標籤頁選中的 2016-10-3日 而不是2016-10-1日。 這種情形sessionStorage更合適

相關事件

// 在其餘標籤頁操做web storage才能觸發
window.addEventListener("storage", displayStorageEvent, true);
function  displayStorageEvent(e){
    for(var i in event){
        console.log("key: " + e.key + " , oldValue: "+e.oldValue + " ,newValue: " + e.newValue + " ,url: " + e.url + " ,storageArea: " + e.storageArea);
    }
 }

Storage事件相關屬性

key	value
key	被更新或操做的鍵
oldValue	更新前的值，若是是新增則爲null
newValue	更新後的值，若是是刪除則爲null
url	Storage事件見發生的源
storageArea	localStorage或者sessionStorage

不管什麼時候，Storage 對象發生變化時（即建立/更新/刪除數據項時，重複設置相同的鍵值不會觸發該事件，Storage.clear() 方法至多觸發一次該事件），StorageEvent 事件會觸發。在同一個頁面內發生的改變不會起做用——在相同域名下的其餘頁面（如一個新標籤或 iframe）發生的改變纔會起做用。在其餘域名下的頁面不能訪問相同的 Storage 對象。