如何将事件绑定到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

这就是我认为的方式.从规范(重点添加):

当setItem(),removeItem()和clear()方法叫上 Storage了与会话存储区域关联,对象x如果方法做了,然后在每一个文件对象,其Window对象的sessionStorage的属性的存储对象与同一存储区域相关联的,除了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
});