跨标签页通信可通过BroadcastChannel API实现直接消息传递，如登录状态同步；也可利用localStorage事件监听同源页面间键值变化来触发状态更新；对于复杂场景，可结合IndexedDB与Page Visibility API在页面激活时检查数据变更；SharedWorker适用于高频率通信但维护成本高。实际应用中，BroadcastChannel与localStorage组合已能满足多数需求。
跨标签页通信在现代Web应用中很常见，比如用户在一个标签页登录后，其他标签页自动同步登录状态。JavaScript本身不支持直接的跨标签页通信，但可以通过一些浏览器提供的机制来实现状态同步与消息传递。
使用 BroadcastChannel API
BroadcastChannel 是最直接的方式，允许同源的不同标签页、iframe 或 worker 之间发送和接收消息。
它简单易用，适合轻量级通信。
示例：const channel = new BroadcastChannel('my-channel');
// 发送消息
channel.postMessage({ type: 'LOGIN', user: 'Alice' });
// 接收消息
channel.onmessage = (event) => {
if (event.data.type === 'LOGIN') {
console.log('用户已登录:', event.data.user);
// 更新当前页面状态
}
};
关闭通道时记得调用 channel.close() 释放资源。
立即学习“Java免费学习笔记（深入）”；
利用 localStorage 事件
当一个标签页修改 localStorage 时，同源的其他标签页会触发 storage 事件，但注意：修改的标签页自身不会收到该事件。
适合用于简单的状态同步，如用户登录、主题切换等。
示例：// 监听 storage 变化
window.addEventListener('storage', (event) => {
if (event.key === 'authToken') {
if (event.newValue) {
console.log('用户已登录');
} else {
console.log('用户已登出');
}
}
});
// 在另一个标签页设置 token
localStorage.setItem('authToken', 'abc123');
这种方式不能传递复杂对象或函数，只能通过键值变化通知状态更新。
结合 IndexedDB + 页面可见性 API
对于更复杂的状态同步需求，可使用 IndexedDB 存储数据，并配合 Page Visibility API 检测页面是否激活，从而在页面回到前台时重新加载最新状态。
例如：多个标签页共用一份数据，当某个页面更新数据后，其他页面在重新聚焦时检查是否有变更。
示例：document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
// 页面回到前台，检查数据是否需要同步
checkForUpdates();
}
});
这种方法延迟较高，不适合实时通信，但稳定性好，适合数据持久化场景。
使用 SharedWorker（较少见）
SharedWorker 是一种可以在多个脚本间共享的后台线程，适用于复杂的跨标签页协调逻辑。
但由于兼容性和调试难度问题，实际项目中使用较少。
基本结构：- 创建一个 SharedWorker 脚本，管理状态和消息转发
- 每个标签页通过 port 与其通信
- SharedWorker 广播状态给所有连接的页面
适合高频率、结构化通信场景，但需权衡维护成本。
基本上就这些主流方法。选择哪种方式取决于你的具体需求：实时性、浏览器支持、数据大小和复杂度。BroadcastChannel 和 localStorage 配合通常就能解决大多数问题。
