如何使用 sessionStorage 和事件偵聽器跨瀏覽器標籤共用資料？

在瀏覽器標籤之間共享sessionStorage 值

儲存網站的瀏覽器會話值時，sessionStorage 通常用於保留數據，直到瀏覽器關閉為止。然而，這些值被隔離到各個選項卡，使得跨多個選項卡共享資料變得困難。

理解問題

想像在 sessionStorage 中儲存重要值，打算讓它們可以在所有開啟的標籤上存取。但是，如果使用者開啟新分頁並導航至其他頁面，則前一個分頁中的 sessionStorage 值將在此新分頁中不可用。當您想要確保所有活動瀏覽器實例中資料的一致性時，這可能會成為一個問題。

解決方案：利用localStorage 和事件監聽器

在選項卡之間共用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' && !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 中的更改，並根據事件觸發器採取適當的操作。當一個選項卡請求 sessionStorage 資料（透過在 localStorage 中設定「getSessionStorage」）時，其他選項卡將透過發送自己的 sessionStorage 內容進行回應。然後，接收選項卡使用接收到的資料更新自己的 sessionStorage，從而有效地跨選項卡共用值。

瀏覽器相容性

此解決方案經過測試，與主要瀏覽器相容，包括 Chrome、Firefox、Safari 和 Internet Explorer 9 及更高版本。請注意，IE8 可能需要 JSON shim 才能實現完整功能。

結論

利用localStorage 和事件偵聽器，您可以輕鬆地在瀏覽器標籤之間共用sessionStorage 值，確保一致應用程式多個實例的數據可用性。此技術對於維護使用者會話資料或儲存需要在所有活動瀏覽器視窗中存取的重要值特別有用。

以上是如何使用 sessionStorage 和事件偵聽器跨瀏覽器標籤共用資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！