h5 storage事件監聽

場景

因項目需求，遇到了須要在兩個窗口的頁面利用 localStorage 同步傳值

如：

• a b窗口同時打開了一個頁面，此時點擊a窗口的按鈕 提交了事件改變了localstorage ，在b窗口的某一個值也須要同步改變
  

分析：

引用《h5移動web開發指南》上的話：

當同源頁面的某個頁面修改了localStorage,其他的同源頁面只要註冊了 storage 事件，就會觸發

因此，localStorage的例子運行須要以下條件：

• 同一瀏覽器打開了兩個同源頁面
• 其中一個網頁修改了localStorage
• 另外一網頁註冊了storage事件

*注意：在同一個網頁修改本地存儲，又在同一個網頁監聽，這樣是沒有效果的。

例子：

網頁A：監聽了storage事件：

window.addEventListener("storage", function (e) {  
    console.log(e.newValue);
})複製代碼

網頁B：修改了 storage 事件：

localStorage.setItem("test", "1234");複製代碼

此時，在網頁A的storage會被觸發，從而拿到值

*注意：兩個網頁必須同源纔有效，並且不能爲同一個頁面

擴展：

若是非得要在同一網頁監聽怎麼辦？能夠重寫localStorage的方法，拋出自定義事件：

// 保留一份原來的 setItem 方法
let orignalSetItem = localStorage.setItem;
// 重寫 setItem 方法，加入自定義事件
localStorage.setItem = function (key, value) {  
    var setItemEvent = new Event("setItemEvent");  
    setItemEvent.value = value;  
    setItemEvent.key = key;  
    window.dispatchEvent(setItemEvent);  
    orignalSetItem.apply(this, arguments);
}
window.addEventListener("setItemEvent", function (e) {  
    console.log(e.key); // test
    consloe.log(e.value); // 1234
});
localStorage.setItem("test", "1234");
複製代碼