Question

我使用带存储参数的方法addEventListener来检测存储的变化。但是，它没有用。我是在Chrome上做的。有什么问题？

＆＃13;

window.addEventListener('storage', function(storageEvent){
    console.log(storageEvent);
});

function setData(){
  localStorage.setItem('superpower', 'heatvision');
}

function clearData(){
  localStorage.clear()
}

＆＃13;

<button onClick="setData()">Set</button>
<button onClick="clearData()">Clear</button>

＆＃13;

Answer 1

在同一个窗口中检测存储更改是不可能的。由于您使用的是getItem和setItem，因此请尝试使用包装器方法，然后调用该包装器方法：

const myLSInterface = {
  listeners: [],
  set: function(key, value) {
    localStorage.key = value;
    const thisEventObj = { key, value };
    this.listeners.forEach(listener => listener(thisEventObj));
  },
  addListener: function(listener) {
    this.listeners.push(listener);
  },
};
myLSInterface.addListener((eventObj) => {
  console.log(JSON.stringify(eventObj));
});
myLSInterface.set('foo', 'bar');

查看直播（由于安全问题无法在SO上完成）：

https://jsfiddle.net/0pgyxotn/

Answer 2

来自Web_Storage_API

如果您在另一个标签页中加载此页面，请对您的页面进行更改在着陆页中的选项，您将看到更新的存储空间激活StorageEvent时输出的信息

所以基本上它意味着如果存储从另一个选项卡更改，那么它将反映在登录页面中。

举一个这个demo的例子。如果您在两个不同的标签中打开此链接，您将看到第二个标签中的更改反映在第一个标签中，而他在第一个标签中的更改未反映在同一页面中。

mdn上有一个插件。您还可以浏览this

添加存储事件监听器不起作用

2 个答案: