跨标签页通信可通过BroadcastChannel实现高效同源通信，辅以localStorage监听变化作为兼容方案，SharedWorker适用于复杂场景，降级可选轮询sessionStorage或cookie。
跨标签页通信的核心是解决同一个浏览器中多个页面实例之间的数据同步问题。常见场景包括用户登录状态同步、消息提醒、实时更新等。实现方案需要考虑兼容性、性能和使用场景的复杂度。
使用 BroadcastChannel API
BroadcastChannel 是现代浏览器提供的原生 API，专门用于同源页面间的通信，使用简单且高效。
- 创建一个频道实例，不同标签页订阅同一频道即可收发消息
- 消息只在同源页面间传递，安全性高
- 不支持 IE 和部分旧版本浏览器
示例代码：
const channel = new BroadcastChannel('my_channel');
// 发送消息
channel.postMessage({ type: 'login', user: 'alice' });
// 接收消息
channel.onmessage = (event) => {
console.log('收到:', event.data);
};
利用 localStorage + storage 事件
所有同源标签页共享同一个 localStorage，当一个页面修改它时，其他页面会触发 storage 事件。
- 兼容性好，几乎所有浏览器都支持
- 只能监听变化，不能主动推送（被动接收）
- 需注意频繁写入可能引发性能问题
示例代码：
// 页面A：写入数据
localStorage.setItem('userStatus', JSON.stringify({ loggedIn: true }));
// 页面B：监听变化
window.addEventListener('storage', (event) => {
if (event.key === 'userStatus') {
console.log('状态更新:', event.newValue);
}
});
基于 SharedWorker 的方案
SharedWorker 是独立于页面运行的全局线程，多个标签页可以同时连接它，适合复杂通信逻辑。
- 可集中管理状态或与后端保持长连接
- 调试较困难，兼容性不如 BroadcastChannel
- 适用于需要持久化连接的场景
需单独创建 worker 文件，并通过 port 进行通信，结构稍复杂。
降级方案：轮询 sessionStorage 或 cookie
在不支持上述 API 的环境中，可通过定时检查 sessionStorage 或 cookie 变化模拟通信。
- 效率低，存在延迟
- 仅作为兜底手段
- 可用于极简需求或老系统兼容
基本上就这些。推荐优先使用 BroadcastChannel，配合 localStorage 做降级处理，既能保证现代浏览器体验，也能覆盖老旧环境。关键是根据项目需求选择合适层级的方案。
