在同一窗口上使用 localStorage 監聽更改

Question

我想偵聽同一頁面上 localStorage API 中發生的更改（而不是像規范所說的那樣在多個選項卡中）。

我目前正在使用此代碼：

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

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

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

有誰知道在一個頁面上監聽 localStorage 事件的普通 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 的一部分。

const originalSetItem = localStorage.setItem;

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

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

  document.dispatchEvent(event);

  originalSetItem.apply(this, arguments);
};

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

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

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

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