Javascript 在同一窗口上使用localStorage侦听更改

我想在同一页面上（而不是像规范所说的那样在多个选项卡中）侦听localStorage API中发生的更改

我目前正在使用此代码：

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

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

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

---

有没有人知道一种普通的JavaScript方法可以在一个页面上监听localStorage上的事件（没有jQuery）

，因为JS是动态语言，只需重写原始函数即可

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

---

更新了上述答案，因为document.createEvent现在是旧的、不推荐使用的API的一部分

var originalSetItem = localStorage.setItem;

localStorage.setItem = function(key, value) {
  var event = new Event('itemInserted');

  event.value = value; // Optional..
  event.key = key; // Optional..

  document.dispatchEvent(event);

  originalSetItem.apply(this, arguments);
};

var localStorageSetHandler = function(e) {
  alert('localStorage.set("' + e.key + '", "' + e.value + '") was called');
};

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

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

---

万岁！JavaScript和重写原始函数@f、 lorenzo，rigtht，但也许留下来思考一下为什么W3C合作者决定只为不同的页面提供事件是个好主意。如果同一事件传播到所有窗口，包括

设置
窗口，就会出现问题。在这里，您引入了一种独特的事件类型，它避免了许多问题。如果您在一个组件中设置值，并且希望从另一个组件侦听，那么会发生什么问题？请注意，如果将localStorage设置为数组，例如
localStorage[“foo”]=“bar”
，或者设置为
localStorage.foo=“bar”，那么这将不起作用
这种策略在Firefox中似乎不起作用。至少在版本61.0.1中没有。也许你不允许在Firefox中覆盖本机函数？很难说，因为我无法在Firefox控制台中检查函数。嗯，这很不幸。不知道为什么。但是您可以编写一个自定义函数并调用它，而不是直接使用和修改localStorage.setItem。这就是我最后所做的。@BrandonFranklin-是的，您可以为您创建的事件对象分配属性，我已将其添加到示例中。我选择了“值”和“键”作为属性名，但您可以选择任何您喜欢的名称。@Devops Paddy-是的！我已经更新了示例，以展示如何向事件对象添加道具。