LocalStorage:
默认情况下,当前页面修改localStorage,本页面是无法监听的,只有同源的其他页面才可以监听到本页面localStorage的改变。
所以默认监听localstorage变化的三个条件:
至少打开了两个同源页面
其中一个页面修改了localStorage
另外的同源页面做了localStorage的监听
监听方法:
// 回调的e对象中含有localStorage改变的键key和新旧值newValue/oldValue window.addEventListener("storage", function (e) { alert(e.newValue); });
如何监听本页面localStorage改变?
我们需要重写localStorage的setItem方法,使他抛出自定义事件,我们再做监听。
var orignSetItem = window.localStorage.setItem; window.localStorage.setItem = function(key, newValue){ var newSetItemEvent = new Event("newSetItemEvent"); newSetItemEvent.newValue = newValue; window.dispatchEvent(newSetItemEvent ); // 抛出自定义事件 orignSetItem.apply(this, [key, newValue]); } // 监听抛出的自定义事件 window.addEventListener("newSetItemEvent", function (e) { // doSomething // 回调的e对象中含有localStorage改变的键key和新旧值newValue/oldValue及一些其他属性 });
具体应用详见:js利用storage改变事件实现跨页面通信