Javascript 如何将事件绑定到 sessionStorage？

How do I bind event to sessionStorage?

提问by Tesco

I can successfully bind an event for a change to localStorage (using jquery):

我可以成功绑定一个事件以更改 localStorage（使用 jquery）：

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

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

If I use sessionStorage, the event will NOT fire:

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

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

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

Why is this?

为什么是这样？

采纳答案by James Allardice

That is the way it's meant to be I think. From the spec(emphasis added):

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

When the setItem(), removeItem(), and clear()methods are called on a Storageobject x that is associated with a session storage area, if the methods did something, then in every Document object whose Window object's sessionStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired

当setItem()，removeItem()和clear()方法叫上 Storage了与会话存储区域相关联的对象x，如果方法做了，然后在每一个文件对象，其Window对象的sessionStorage的属性的存储对象与同一存储区域相关联的，除了X，必须触发存储事件

I thinkwhat that means is that the event will be fired in any other document sharing the session storage object, but not the document that caused the event to fire.

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

Update

更新

Here's another very similar questionwhich seems to agree with what I've mentioned above (the answer quotes the same paragraph from the spec).

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

回答by Nicu Surdu

The sessionStorageis isolated for each tab, so they can't communicate. Events for sessionStorageare triggered only in between frames on the same tab.

该sessionStorage分离为每个标签，因此它们不能通信。事件sessionStorage仅在同一选项卡上的帧之间触发。

EDIT:

编辑：

I've made the following example:

我做了以下例子：

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

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

The example page has two buttons that trigger a local and a session storage change.

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

It also embeds an iframe to another codepen that listens for storage events changes:

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

http://codepen.io/surdu/pen/GNYNrW?editors=1010(you should keep this opened in a different tab.)

http://codepen.io/surdu/pen/GNYNrW?editors=1010 （你应该在不同的标签中打开它。）

You will notice that when you press the "Write local" button, in both the iframe and the opened tab the event is captured, but when you press the "Session write" only the embedded iframe captures the event.

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

回答by Ruben Serrate

This question seems to be getting quite a few views, so I will just post this as extra info.

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

In case you want to respond exclusively to updates on the sessionStorage object, you can just ignore the events caused by localStorage:

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

I hate jQuery, so will post a the native version as well:

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

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