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");
复制代码

转载于:https://juejin.im/post/5c2f23f151882525db141e84