Skip to content

多标签页通信:storage、BroadcastChannel、SharedWorker 与一致性

主题边界

  • 多标签页通信要解决的是同源页面之间的消息同步、一致性和资源共享问题。
  • 关键不是 API 数量,而是消息时效、可靠性、广播范围和生命周期边界。

机制与流程

  • storage 事件依赖 localStorage 变更触发,适合低频同步,但表达能力弱且不适合作为消息总线。
  • BroadcastChannel 提供同源页面之间的显式广播通道,语义直接、实现简单,适合状态同步和通知。
  • SharedWorker 可以在多个页面间共享一个后台执行上下文,更适合连接复用、集中调度和共享资源。

关键差异

  • storage 更像副作用触发器,BroadcastChannel 是广播消息通道,SharedWorker 是共享执行上下文,三者层级不同。
  • Service Worker 也能参与跨页面协调,但它更偏网络代理、离线和后台事件,不等价于普通同页广播。

边界条件

  • 消息同步不等于状态一致性;冲突写入、顺序问题和页面恢复仍然需要业务协议层处理。
  • 关闭标签页、挂起页面、bfcache 恢复都会影响消息接收和状态刷新时机。

工程落点

  • 登录态变更、主题切换、草稿同步、单实例播放控制和连接复用,都是多标签页通信的常见场景。
  • 这道题很容易和 Storage、Page Lifecycle、Service Worker 形成一条跨模块链。

相关主题