Question

我想在同一页面上侦听localStorage API中发生的更改（不像规范所说的那样在多个标签中）。

我目前正在使用此代码：

var storageHandler = function () {
    alert('storage event 1');
  };

  window.addEventListener("storage", storageHandler, false);

localStorage.setItem('foo', 'bar');

有没有人知道在一个页面上监听localStorage上的事件的vanilla JavaScript方式（没有jQuery）

Answer 1

由于JS是动态语言，只需重写原始函数。

var originalSetItem = localStorage.setItem; 
localStorage.setItem = function(){
    document.createEvent('Event').initEvent('itemInserted', true, true);
    originalSetItem.apply(this, arguments);
}

Answer 2

更新了上面的答案，因为document.createEvent现在是旧的，已弃用的API的一部分。

var originalSetItem = localStorage.setItem;

localStorage.setItem = function() {
  var event = new Event('itemInserted');
  document.dispatchEvent(event);

  originalSetItem.apply(this, arguments);
}

var storageHandler = function(e) {
  alert('storage event 1');
};

document.addEventListener("itemInserted", storageHandler, false);

localStorage.setItem('foo', 'bar'); // Pops an alert

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

在同一窗口中使用localStorage监听更改

2 个答案: