在瀏覽器標(biāo)籤之間共享sessionStorage 值

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

理解問題

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

解決方案：利用localStorage 和事件監(jiān)聽器

在選項卡之間共用sessionStorage 值，您可以利用localStorage 並利用其「儲存」事件偵聽器在選項卡之間傳播資料變更。此程式碼應(yīng)在所有活動標(biāo)籤中實現(xiàn)，並在其他腳本之前執(zhí)行：

<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 在標(biāo)籤之間建立通信通道。事件偵聽器監(jiān)視 localStorage 中的更改，並根據(jù)事件觸發(fā)器採取適當(dāng)?shù)牟僮?。?dāng)一個選項卡請求 sessionStorage 資料（透過在 localStorage 中設(shè)定「getSessionStorage」）時，其他選項卡將透過發(fā)送自己的 sessionStorage 內(nèi)容進(jìn)行回應(yīng)。然後，接收選項卡使用接收到的資料更新自己的 sessionStorage，從而有效地跨選項卡共用值。

瀏覽器相容性

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

結(jié)論

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

以上是如何使用 sessionStorage 和事件偵聽器跨瀏覽器標(biāo)籤共用資料？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！