每次在 Safari 5 中更新 localStorage 时，如何才能触发事件？

Question

我试图遵循 Safari 开发者网站上的示例。

文档建议像这样添加一个事件监听器：

window.addEventListener('storage', storage_handler, false);

然后像这样设置你的处理函数：

function storage_handler(evt)
{
    alert('The modified key was '+evt.key);
    alert('The original value was '+evt.oldValue);
    alert('The new value is '+evt.newValue);
    alert('The URL of the page that made the change was '+evt.url);
    alert('The window where the change was made was '+evt.source);
}

但我似乎无法让这段代码在我的机器（OS X 10.6，Safari 5.01）上工作，也无法在我的 iPhone 3GS 上的 Safari 上工作（ iOS 4.02）。

这篇文章提供了一种单独的方法：

window.onload = function() {
    ...
    document.body.setAttribute("onstorage", "handleOnStorage();");
}

function handleOnStorage() {
    if (window.event && window.event.key.indexOf("index::") == 0){
        $("stats").innerHTML = "";
        displayStats();
    }
}

但我还没有祝你好运。

我做错了什么吗？这是一个错误吗？

Answer 1

经过进一步调查（并在朋友的帮助下），我发现 storage_handler 方法不是在当前窗口或选项卡中的页面上本地存储值发生更改时调用的，而是在另一个选项卡中发生更改时调用。

例如，如果我打开两个选项卡，并且每个选项卡的页面中都有控件来更改本地存储设置，那么当我点击第一个选项卡中的控件时，会在另一个选项卡中调用 storage_handler 方法。

Answer 2

如果您想在同一页面上将对象保存到 localStorage 后执行某些操作，您可以在调用 localStorage.setItem 后手动调用该函数，并从 storage 中调用相同的函数> 事件监听器来处理多个选项卡。

Answer 3

我意识到这是关于 Safari 的询问，但是根据 Mozilla 开发者网络，只有当 Web 存储对象从页面外部（例如在另一个选项卡中）更改时才会触发 StorageEvent。

https://developer.mozilla.org/en-US/ docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

向下滚动到“使用 StorageEvent 响应存储更改”。

（我会将此作为评论添加到已接受的答案中，但我没有代表。）

Answer 4

可以每次设置本地存储时发送一个存储事件

const favorites: null | string =
  localStorage.getItem(favoritesKey);
localStorage.setItem(
  favoriteKey,
  JSON.stringify(
      favorites === null
      ? [id]
      : [...JSON.parse(favorites), id]
  )
);

window.dispatchEvent(new Event("storage"));

然后会触发以下内容

useEffect(() => {
  const listener = () => {
    const favorites: null | string = localStorage.getItem(favoriteKey);
    if (favorites !== null) {
      setState(JSON.parse(favorites));
    }
  };
  window.addEventListener("storage", listener);
  return () => {
    window.removeEventListener("storage", listener);
  };
}, []);