首頁  >  文章  >  web前端  >  如何在瀏覽器標籤之間共用 SessionStorage 值?

如何在瀏覽器標籤之間共用 SessionStorage 值?

Barbara Streisand
Barbara Streisand原創
2024-10-21 15:25:301055瀏覽

How to Share SessionStorage Values Between Browser Tabs?

瀏覽器標籤之間共用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn