在瀏覽器選項卡之間共享 sessionStorage 值

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

理解問題

想象一下在 sessionStorage 中存儲重要值，打算讓它們可以在所有打開的選項卡上訪問。但是，如果用戶打開新選項卡并導航到其他頁面，則前一個選項卡中的 sessionStorage 值將在此新選項卡中不可用。當您想要確保所有活動瀏覽器實例中數(shù)據(jù)的一致性時，這可能會成為一個問題。

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

在選項卡之間共享 sessionStorage 值，您可以利用 localStorage 并利用其“存儲”事件偵聽器在選項卡之間傳播數(shù)據(jù)更改。此代碼應在所有活動選項卡中實現(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 在選項卡之間建立通信通道。事件偵聽器監(jiān)視 localStorage 中的更改，并根據(jù)事件觸發(fā)器采取適當?shù)牟僮?。當一個選項卡請求 sessionStorage 數(shù)據(jù)（通過在 localStorage 中設置“getSessionStorage”）時，其他選項卡將通過發(fā)送自己的 sessionStorage 內容進行響應。然后，接收選項卡使用接收到的數(shù)據(jù)更新自己的 sessionStorage，從而有效地跨選項卡共享值。

瀏覽器兼容性

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

結論

通過利用 localStorage 和事件偵聽器，您可以輕松地在瀏覽器選項卡之間共享 sessionStorage 值，確保一致應用程序多個實例的數(shù)據(jù)可用性。此技術對于維護用戶會話數(shù)據(jù)或存儲需要在所有活動瀏覽器窗口中訪問的重要值特別有用。

以上是如何使用 sessionStorage 和事件偵聽器跨瀏覽器選項卡共享數(shù)據(jù)？的詳細內容。更多信息請關注PHP中文網其他相關文章！