sessionStorage とイベント リスナーを使用してブラウザのタブ間でデータを共有する方法

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

Web サイトのブラウザ セッション値を保存する場合、ブラウザが終了するまでデータを保持するために sessionStorage がよく使用されます。閉まっている。ただし、これらの値は個々のタブに分離されているため、複数のタブ間でデータを共有することが困難になります。

問題を理解する

重要な値を sessionStorage に保存することを想像してください。開いているすべてのタブからアクセスできるようにします。ただし、ユーザーが新しいタブを開いて別のページに移動した場合、前のタブの sessionStorage 値はこの新しいタブでは使用できなくなります。これは、すべてのアクティブなブラウザ インスタンスで一貫したデータの可用性を確保したい場合に問題になる可能性があります。

解決策: localStorage と Event Listeners を活用する

タブ間で sessionStorage の値を共有するにはでは、localStorage を利用し、その「ストレージ」イベント リスナーを活用して、タブ間でデータの変更を伝達できます。このコードはすべてのアクティブなタブに実装され、他のスクリプトの前に実行される必要があります。

<code class="javascript">// Transfer sessionStorage data between tabs
var sessionStorage_transfer = function(event) {
  if (!event || !event.newValue) return;
  if (event.key == 'getSessionStorage') {
    // Send sessionStorage data to other tabs
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    localStorage.removeItem('sessionStorage');
  } else if (event.key == 'sessionStorage' &amp;&amp; !sessionStorage.length) {
    // Receive sessionStorage data from other tabs
    var data = JSON.parse(event.newValue);
    for (var key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
};

// Listen for changes to localStorage
window.addEventListener("storage", sessionStorage_transfer, false);

// Trigger the event to request sessionStorage data from other tabs
if (!sessionStorage.length) {
  localStorage.setItem('getSessionStorage', 'foobar');
  localStorage.removeItem('getSessionStorage', 'foobar');
};</code>

仕組み

このコードは、localStorage を使用してタブ間の通信チャネルを確立します。イベント リスナーは、localStorage 内の変更を監視し、イベント トリガーに応じて適切なアクションを実行します。 1 つのタブが sessionStorage データを要求すると (localStorage で「getSessionStorage」を設定することによって)、他のタブは独自の sessionStorage コンテンツを送信して応答します。次に、受信タブは、受信したデータで独自の sessionStorage を更新し、タブ間で値を効果的に共有します。

ブラウザの互換性

このソリューションはテストされており、主要なブラウザと互換性があります。 、Chrome、Firefox、Safari、Internet Explorer 9 以降が含まれます。 IE8 の完全な機能には JSON シムが必要な場合があることに注意してください。

結論

localStorage とイベント リスナーを活用することで、ブラウザ タブ間で sessionStorage 値を簡単に共有でき、一貫性を確保できます。アプリケーションの複数のインスタンスにわたるデータの可用性。この手法は、ユーザー セッション データを維持したり、すべてのアクティブなブラウザ ウィンドウでアクセスできる必要がある重要な値を保存したりする場合に特に役立ちます。

以上がsessionStorage とイベント リスナーを使用してブラウザのタブ間でデータを共有する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。