首页 > 建站教程 > JS、jQ、TS >  监听localstorage仓库变化正文

监听localstorage仓库变化

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改变事件实现跨页面通信