如何在浏览器选项卡之间共享 SessionStorage 值？

在浏览器选项卡之间共享 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中文网其他相关文章！