如何使用 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中文网其他相关文章！