如何将事件绑定到sessionStorage？

Question

我可以成功绑定事件以更改为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');

为什么是这样？

Answer 1

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

编辑：

我做了以下示例：

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

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

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

http://codepen.io/surdu/pen/GNYNrW?editors=1010 （您应该在另一个标签中打开它。）

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

Answer 2

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

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

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

更新

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

Answer 3

这个问题似乎得到了不少观点，所以我只是将其作为额外信息发布。

如果您想要专门响应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
});