broadcastchannel仅在同源页面间有效且不发给自身；常见失效原因包括：频道名大小写/空格不一致、页面未加载完就调用postmessage、未监听onmessageerror、非https环境被禁用、多实例重复绑定导致重复处理，需封装单例并正确管理生命周期。
BroadcastChannel 只在同源页面间有效，且不能发给自身；用错 origin 或没监听 onmessageerror 会导致消息静默丢失。
为什么 BroadcastChannel.postMessage 没反应
常见错误是：页面未加载完成就调用 postMessage，或频道名大小写/空格不一致（'cctv' 和 'CCTV' 是两个频道）。BroadcastChannel 不会抛出异常，发错目标时只是“石沉大海”。
- 确保所有页面都已执行
new BroadcastChannel('xxx')，且频道名完全一致（区分大小写、无空格） - 发送前检查
bc是否为有效实例，避免bc === null或bc.closed === true - 必须在
onmessage之外单独监听onmessageerror，否则解析失败的 JSON 或跨域 iframe 注入会静默失败 - Chrome 90+ 对非安全上下文（http://localhost 除外）限制更严，非 HTTPS 页面可能直接禁用该 API
如何避免重复收到自己发的消息
BroadcastChannel 天然不回传给自己，这是它和 localStorage + storage 事件的关键区别。但如果你在多个标签页中都运行了同一套初始化逻辑（比如自动 openBroadcast()），又在每个页面都绑定了相同处理函数，就容易误以为“收了自己发的”。
- 不需要手动加 ID 去重，
bc.postMessage()发出的消息不会触发本页的onmessage - 真正要防的是“多实例监听”：一个页面里多次执行
new BroadcastChannel('chat')并重复绑定onmessage，会导致同一个消息被同一个页面处理多次 - 建议封装成单例：
const bc = window.bc ?? (window.bc = new BroadcastChannel('chat'))
BroadcastChannel 和 localStorage.storage 事件怎么选
二者都只支持同源，但行为逻辑完全不同：BroadcastChannel 是主动推送、任意结构化数据、无存储副作用；storage 事件是被动响应、仅由 localStorage.setItem 触发、且只带 key/value 字段。
- 需要发对象、数组、二进制（
ArrayBuffer）→ 必须用BroadcastChannel，storage只能存字符串 - 想让消息“自动过期”或依赖浏览器存储机制 → 选
localStorage，但得自己序列化/反序列化 - 页面可能长时间后台冻结（如 Chrome 标签页休眠）→
BroadcastChannel消息会丢失，storage事件在切回页面时仍会触发 - 兼容性要求 IE → 二者都不行，得降级到
window.postMessage+ iframe 或轮询
真正容易被忽略的是生命周期管理：bc.close() 不仅释放资源，还会让后续 postMessage 抛出 InvalidStateError；而忘记关闭可能导致内存泄漏，尤其在 SPA 路由切换频繁时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
