22

我可以成功地将事件绑定到 localStorage 的更改（使用 jquery）：

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

localStorage.setItem('someItem', 'someValue');

如果我使用 sessionStorage，该事件将不会触发：

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

sessionStorage.setItem('someItem', 'someValue');

为什么是这样？

4

3 回答 3

26

每个选项卡sessionStorage都是隔离的，因此它们无法通信。的事件sessionStorage仅在同一选项卡上的帧之间触发。

编辑：

我做了以下例子：

http://codepen.io/surdu/pen/QGZGLO?editors=1010

示例页面有两个按钮可以触发本地和会话存储更改。

它还将 iframe 嵌入到另一个监听存储事件更改的 codepen：

http://codepen.io/surdu/pen/GNYNrW?editors=1010 （您应该在不同的选项卡中打开它。）

您会注意到，当您按下“写入本地”按钮时，在 iframe 和打开的选项卡中都会捕获事件，但是当您按下“会话写入”时，只有嵌入的 iframe 会捕获事件。

于 2014-01-22T12:34:23.563 回答
17

这就是我认为的方式。从规范（强调添加）：

当在与会话存储区域关联的对象 x 上调用 、 和 方法时 setItem()，removeItem()如果这些方法做了某些事情，则在每个 Document 对象中，其 Window 对象的 sessionStorage 属性的 Storage 对象与相同的存储区域关联，而不是 x，必须触发存储事件clear()Storage

我认为这意味着该事件将在共享会话存储对象的任何其他文档中触发，但不会在导致事件触发的文档中触发。

更新

这是另一个非常相似的问题，似乎与我上面提到的一致（答案引用了规范中的同一段）。

于 2012-04-21T15:06:52.110 回答
9

这个问题似乎得到了很多意见，所以我将把它作为额外信息发布。

如果你想专门响应 sessionStorage 对象的更新，你可以忽略 localStorage 引起的事件：

$(window).on('storage',function(e){
   if(e.originalEvent.storageArea===sessionStorage){
     alert('change');
   } 
   // else, event is caused by an update to localStorage, ignore it
});

我讨厌 jQuery，所以也会发布一个原生版本：

window.addEventListener('storage',function(e){
   if(e.storageArea===sessionStorage){
     alert('change');
   } 
   // else, event is caused by an update to localStorage, ignore it
});
于 2016-04-08T11:13:18.803 回答