場景
因專案需求,遇到了需要在兩個視窗的頁面利用 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");
複製程式碼