12 · 跨标签页通信

字数: 0 字 时长: 0 分钟

一句话

同一网站 开了多个标签页，要同步登录态、表单、播放状态 → 多种 API：BroadcastChannel、localStorage 事件、SharedWorker、WebSocket 等。

和你日常工作的关系

• A 标签退出登录，B 标签也要跳登录页
• A 标签改草稿，B 标签实时看到
• 音乐播放器：一个标签播放，另一个显示进度

方案对比

方案	特点
BroadcastChannel	同源，API 简单，推荐首选
localStorage + storage 事件	兼容老；写 storage 触发其他页 storage 事件
SharedWorker	多标签共享一个 worker 上下文，较冷门
WebSocket	经服务器中转，跨设备也行
window.open + postMessage	父子窗口

演示（必玩）

12-broadcast-channel.html — 复制 URL 开两个标签，互发消息。

课程更多 demo：12.跨标签页通信/代码/演示代码/cross-tab-communication/

和 07 表单章的关系

FormStorage 用 BroadcastChannel 同步多标签表单，本章是 通信方式总览。

面试

• 同源多标签首选 BroadcastChannel。
• localStorage 事件注意：同一页 write 不会触发自己，只有其他标签触发。
• 安全：只传必要数据，不传敏感明文。

课程资料

12.跨标签页通信/12-技术讲解.md