题库/浏览器与网络/题目详解
专题深化约 3 分钟阅读

MessageChannel、BroadcastChannel、storage 与 postMessage 如何选择？

先理解原理和示例，再练习完整口述与追问。

回答要点

成对端口、同源广播、存储事件、指定窗口；结构化消息；来源权限、关闭与恢复；不把通信当持久化。

原理拆解

MessageChannel 创建两个 MessagePort，适合建立双向专用消息通道，也可把端口转交给 Worker 或窗口。BroadcastChannel 让满足来源与存储分区等条件的上下文按频道名广播，适合标签页同步。storage 事件可把其他相关页面的存储变化作为通知，写入页本身通常不收到同一次事件。postMessage 适合已持有目标窗口引用的受控通信，跨源时必须核对来源与目标。

示例与推演

js
function openNoticeChannel(receive) {
  const channel = new BroadcastChannel('account-notice')
  channel.onmessage = event => {
    if (event.data?.type === 'session-changed') receive()
  }
  return {
    notify() { channel.postMessage({ type: 'session-changed' }) },
    close() { channel.close() }
  }
}

消息只通知“可能已变化”，接收方仍向可信服务重新确认会话。需要最终一致状态时，从权威数据源恢复，而不是把广播当数据库。

易错点

通道名不是访问控制；同源页面也可能不可信。旧环境支持、分区、重连和页面关闭都要考虑，不能承诺所有标签页必收到消息。

参考回答可直接练习口述

专用端口用 MessageChannel，相关标签页通知可用 BroadcastChannel，存储事件用于适合的兼容场景，跨窗口用校验严格的 postMessage。消息包含类型和必要关联 ID，执行校验并关闭通道，关键状态从服务端恢复。