web-dev-qa-db-ja.com

イベントをsessionStorageにバインドするにはどうすればよいですか？

（jqueryを使用して）localStorageへの変更のイベントを正常にバインドできます。

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

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

SessionStorageを使用すると、イベントは発生しません。

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

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

どうしてこれなの？

javascriptjqueryeventssessionstorage
18
Tesco

それが私が思うにそういう意味です。 spec から（強調を追加）：

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

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

更新

ここに別の 非常によく似た質問 があります。これは私が上で述べたことと一致しているようです（答えは仕様から同じ段落を引用しています）。

15
James Allardice

sessionStorageはタブごとに分離されているため、通信できません。 sessionStorageのイベントは、同じタブのフレーム間でのみトリガーされます。

編集：

次の例を作成しました。

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

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

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

http://codepen.io/surdu/pen/GNYNrW?editors=101（これは別のタブで開いたままにしておく必要があります。）

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

20
Nicu Surdu

この質問はかなりの数のビューを取得しているようですので、追加情報としてこれを投稿します。

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
});
4
Ruben Serrate