跨标签页解决方法

在 Web 开发中，我们经常会遇到需要在不同的浏览器标签页之间共享数据或者通信的需求。例如，在多个标签页中共享用户登录状态、在一个标签页中发送消息并在另一个标签页中接收等等。然而，由于浏览器的安全机制和同源策略，直接在不同标签页之间进行通信是被禁止的。那么，有哪些跨标签页的解决方法呢？

1. 使用 localStorage 或 sessionStorage

localStorage 和 sessionStorage 都属于 Web Storage API，用于在浏览器中存储键值对。它们的差别在于：

• localStorage 存储的数据没有过期时间限制，除非手动清除；
• sessionStorage 存储的数据在关闭浏览器窗口时会被自动删除。

由于 localStorage 和 sessionStorage 存储的数据可以跨标签页共享，我们可以在一个标签页中将数据存储到 localStorage 或 sessionStorage 中，另一个标签页再从中读取。下面是示例代码：

存储数据

// 存储数据到 localStorage
localStorage.setItem('key', 'value');
// 存储数据到 sessionStorage
sessionStorage.setItem('key', 'value');

读取数据

// 从 localStorage 中读取数据
const valueFromLocalStorage = localStorage.getItem('key');
// 从 sessionStorage 中读取数据
const valueFromSessionStorage = sessionStorage.getItem('key');

监听数据变化

由于 localStorage 和 sessionStorage 存储的数据可以被其他标签页修改，我们需要在当前标签页中监听它们的变化。下面是示例代码：

// 监听 localStorage 的变化
window.addEventListener('storage', (event) => {
  if (event.key === 'key') {
    const newValue = event.newValue;
    // 处理新值
  }
});

2. 使用 Broadcast Channel API

Broadcast Channel API 是一个 HTML5 标准，用于在不同的浏览器上下文（包括不同窗口、标签页和 iframe）之间建立即时通信通道。通过 Broadcast Channel API，我们可以向所有订阅同一频道的浏览器上下文发送消息，并接收来自其它浏览器上下文的消息。下面是示例代码：

创建广播频道

// 创建并命名广播频道
const channel = new BroadcastChannel('my-channel');

发送消息

// 向广播频道发送消息
channel.postMessage({ data: 'hello world' });

接收消息

// 接收广播频道的消息
channel.onmessage = (event) => {
  console.log(event.data); // 输出：{ data: 'hello world' }
};

3. 使用 SharedWorker API

SharedWorker API 可以让多个浏览器上下文之间共享一个 Worker 线程，从而实现跨标签页通信。与 Broadcast Channel API 不同的是，SharedWorker API 需要在一个独立的 JavaScript 文件中创建 Worker 实例，并且可以通过 postMessage 方法向 Worker 发送消息，并通过 onmessage 事件监听 Worker 回复的消息。下面是示例代码：

创建 SharedWorker

// 在 JavaScript 文件中创建 SharedWorker 实例
const worker = new SharedWorker('worker.js');

给 SharedWorker 发送消息

// 向 SharedWorker 发送消息
worker.port.postMessage({ data: 'hello world' });

接收来自 SharedWorker 的消息

// 监听 SharedWorker 回复的消息
worker.port.onmessage = (event) => {
  console.log(event.data); // 输出：{ data: 'hello world' }
};

总结

本文介绍了三种常用的跨标签页解决方法：使用 localStorage 或 sessionStorage、使用 Broadcast

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71407