ブラウザのタブ間で SessionStorage 値を共有するにはどうすればよいですか?

ブラウザ タブ間で sessionStorage 値を共有する

セッション ストレージには、単一のブラウザ タブ内でアクセス可能なデータが保存され、タブを閉じるとクリアされます。ただし、特定のアプリケーションでは、タブ間でセッション ストレージ値を共有する必要があります。

これを実現するには、localStorage とその「ストレージ」イベント リスナーを利用できます。以下は、タブ間での sessionStorage の転送を有効にするコード スニペットです:

<code class="javascript">// transfers sessionStorage from one tab to another
var sessionStorage_transfer = function(event) {
  if(!event) { event = window.event; } // ie suq
  if(!event.newValue) return;          // do nothing if no value to work with
  if (event.key == 'getSessionStorage') {
    // another tab asked for the sessionStorage -> send it
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    // the other tab should now have it, so we're done with it.
    localStorage.removeItem('sessionStorage'); // <- could do short timeout as well.
  } else if (event.key == 'sessionStorage' &amp;&amp; !sessionStorage.length) {
    // another tab sent data <- get it
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// listen for changes to localStorage
if(window.addEventListener) {
  window.addEventListener("storage", sessionStorage_transfer, false);
} else {
  window.attachEvent("onstorage", sessionStorage_transfer);
};


// Ask other tabs for session storage (this is ONLY to trigger event)
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};</code>

このコードはすべてのタブで実行され、他のスクリプトの前に実行される必要があります。

このメソッドにより、sessionStorage の値を複数のタブ間で転送できます。 Chrome、Firefox、Safari、IE 11、IE 10、および IE9 のタブ。 IE8 では、互換性のために JSON シムを含める必要があります。

このコードを実装すると、タブ間で sessionStorage 値を効果的に共有でき、アプリケーションが同じブラウザ セッション内の複数のタブにわたってデータを永続的に保存できるようになります。 .

以上がブラウザのタブ間で SessionStorage 値を共有するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。