broadcastchannel不能跨源通信，因浏览器强制同源（协议+域名+端口完全一致）限制；如localhost与127.0.0.1、http/https混用均视为不同源，导致静默失效。
为什么 BroadcastChannel 不能跨源通信
BroadcastChannel 只能在同源（协议 + 域名 + 端口完全一致）的上下文中工作，这是浏览器强制的安全限制。如果你在 http://localhost:3000 和 http://127.0.0.1:3000 同时打开页面，它们会被视为不同源，BroadcastChannel 实例无法互通——连 postMessage 都收不到，也不会报错，只是静默失效。
常见误判场景：
- 开发时用
localhost跑前端、127.0.0.1跑 API，结果标签页间收不到消息 - HTTP 和 HTTPS 混用（哪怕域名一样），
BroadcastChannel自动隔离 - Vite/HMR 热更新可能创建新 iframe 或临时端口，导致 channel 名看似相同实则隔离
如何正确创建和复用 BroadcastChannel 实例
同一个 channel name 对应一个广播通道，但每个 BroadcastChannel 实例是独立对象，不能共享引用。多个标签页必须用**完全相同的字符串**初始化，且建议在全局作用域尽早创建，避免因执行时机差异导致监听丢失首条消息。
实操建议：
- channel name 用常量定义，比如
const CHANNEL_NAME = 'app-sync'，避免拼写不一致 - 不要在函数内反复
new BroadcastChannel(name)，每次 new 都是新实例；应在模块顶层或单例中持有一个 - 监听前先发一条「上线通知」，让后加入的标签页能同步状态，例如
bc.postMessage({ type: 'join', timestamp: Date.now() }) - 务必监听
error事件，某些浏览器（如 Safari 15.4 之前）对BroadcastChannel支持不完整，会抛NotSupportedError
消息内容必须可序列化，且注意大小限制
BroadcastChannel.postMessage() 底层走的是结构化克隆算法（structured clone），不支持函数、undefined、Symbol、Promise 或循环引用对象。超过约 1MB 的消息在 Chrome 中会触发 DataCloneError，Firefox 限制更严（约 64KB）。
安全做法：
- 发送前用
JSON.stringify()+JSON.parse()预检：如果能 round-trip 就大概率能被广播 - 避免直接传
event对象或 Vue/React 组件实例——它们含大量不可克隆属性 - 敏感数据别依赖它加密传输，它不提供任何加密或鉴权机制
- 大状态同步（如整个 store）建议只发 diff 或 key，再由接收方主动拉取
关闭 channel 时必须显式调用 close()
忘记调用 bc.close() 不仅浪费内存，还会导致页面卸载后仍持有 channel 引用，在某些版本 Edge 和 Safari 中引发 InvalidStateError 或静默失败。尤其在 SPA 路由切换、组件销毁时容易遗漏。
关键点：
- 在
beforeunload或pagehide事件中调用close()，不要只靠组件 unmount - 使用
addEventListener('message', handler)时，记得在close()前用removeEventListener解绑，否则 handler 可能被多次触发 - 多个模块共用同一 channel 时，需协调关闭时机——比如用引用计数，或统一由主入口管理生命周期
真正难的不是发消息，而是处理竞态：两个标签页几乎同时修改同一份 localStorage 并广播，谁的状态最终生效？这得靠业务层加版本号、时间戳或操作日志来协调，BroadcastChannel 本身只负责“尽力送达”。
