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

サンプル ページには、ローカル ストレージとセッション ストレージの変更をトリガーする 2 つのボタンがあります。

また、ストレージ イベントの変更をリッスンする別の codepen に iframe を埋め込みます。

http://codepen.io/surdu/pen/GNYNrW?editors=1010 (別のタブで開いたままにしておく必要があります。)

[ローカルに書き込む] ボタンを押すと、iframe と開いているタブの両方でイベントがキャプチャされますが、[セッションの書き込み] を押すと、埋め込まれた iframe のみがイベントをキャプチャします。

于 2014-01-22T12:34:23.563 に答える
17

それが本来あるべき姿だと思います。仕様から(強調を追加):

setItem()removeItem()およびclear()メソッドがセッション記憶域に関連付けられたオブジェクト x で呼び出された 場合、メソッドが何かを実行した場合、 Window オブジェクトの sessionStorage 属性の Storage オブジェクトがx 以外Storageの同じ記憶域に関連付けられているすべての Document オブジェクトで、ストレージ イベントを発生させる必要があります

これは、セッション ストレージ オブジェクトを共有する他のドキュメントでイベントが発生することを意味すると思いますが、イベントを発生させたドキュメントでは発生しません。

アップデート

これは、私が上で述べたことに同意すると思われる別の非常によく似た質問です(回答は仕様から同じ段落を引用しています)。

于 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 に答える