Question

如何在单个选项卡中收听更改的 localStorage？我使用 addEventListener("storage")。但它只有在你打开 2 个或更多标签时才有效（我使用 React）

Answer 1

首先请注意，single tab 并不代表 localStoage。您的应用程序可能有多个选项卡，并且所有选项卡共享 localStoage。

基于 this，您可以覆盖 setItem 函数并触发事件：

var originalSetItem = localStorage.setItem; 
localStorage.setItem = function () {
    const event = new Event('itemInserted');
    originalSetItem.apply(this, arguments);
    document.dispatchEvent(event);
}

以及用法：

const localStorageSetHandler = function(e) {
  //do something
  console.log('localStorage.set("' + e.key + '", "' + e.value + '") was called');
};

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

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

如何在 1 个标签中监听 localStorage 的变化

1 个答案: