如何为所有浏览器使用 jQuery 绑定到 localStorage 更改事件？

Question

如何使用 jQuery 将函数绑定到 HTML5 localStorage 更改事件？

 $(function () {

  $(window).bind('storage', function (e) {
    alert('storage changed');
  });

  localStorage.setItem('a', 'test');

});

我试过上面的方法，但没有显示警报。

_更新_：它在 Firefox 3.6 中有效，但在 Chrome 8 或 IE 8 中无效，因此问题应该更多“如何为所有浏览器使用 jQuery 绑定到 localStorage 更改事件？”

原文由 David Glenn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

事实证明这实际上工作正常，我误解 了规范

当在与本地存储区域相关联的 Storage 对象 x 上调用 setItem()、removeItem() 和 clear() 方法时，如果这些方法做了一些事情，那么在每个 Document 对象中，其 Window 对象的 localStorage 属性的 Storage 对象是与除 x 以外的相同存储区域相关联，必须触发存储事件

换句话说，存储事件在每个窗口/选项卡上触发， 除了 更新 localStorage 对象并导致事件的窗口/选项卡。

所以事件没有被触发，因为我只打开了一个窗口/选项卡。如果我将上面的代码放在一个页面中并在两个选项卡中打开该页面，我会看到在第二个选项卡中触发的事件。

这个问题的答案 包含更多细节。

原文由 David Glenn 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

以下是如何在 JQuery 中执行此操作：

  $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });

访问 e.key 直接不起作用。您需要使用 e.originalEvent.key 。

有些浏览器只会向其他选项卡发送存储通知，有些则不会。 （Firefox 会将存储事件发送到它自己的选项卡，但 key 似乎设置为空）。

原文由 Flimm 发布，翻译遵循 CC BY-SA 4.0 许可协议