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

Question

I use method addEventListener with storage parameter to detect changing of storage. However, it didn't work. I do it on Chrome. What is wrong?

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

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

Answer 1

It's impossible to detect storage changes in the same window like that. Since you're using getItem and setItem , just try using a wrapper method, and calling that wrapper method instead:

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');

See live (can't be done on SO due to security issues):

https://jsfiddle.net/0pgyxotn/

Answer 2

From Web_Storage_API

if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as the StorageEvent is fired

So basically it means that if the storage is changed from another tab then it will reflect in the landing page.

Take an example of this demo . If you open this link in two different tab , you will see the changes in the second tab is reflecting in the first tab, while he change in the first tab is not reflecting in the same page.

There is one addon on mdn. You can also explore this