broadcastchannel 是唯一原生支持同源多标签页通信的机制，它基于源（protocol+host+port）而非 html 结构或路径，需严格一致的频道名且不跨 dom 隔离环境。
BroadcastChannel 是唯一能直接在 HTML 文档层级实现多标签页通信的原生机制，但它不依赖 DOM 结构，也不跨文档层级传递 —— 它只认同源，不认页面路径或 HTML 文件名。
为什么不能靠
HTML 文档结构（、、）是单页内存快照，每个标签页加载的是独立副本。A 页面的 和 B 页面的同名属性毫无关系，刷新即断，无法继承或广播。试图用 DOM 属性、自定义事件冒泡、或 document 全局对象做跨页同步，全部失效。
常见错误现象：document.querySelector('html').dataset.channelId 在 A 页设了，在 B 页读不到；document.dispatchEvent(new CustomEvent('sync')) 只在当前页触发，其他页完全无感知。
- DOM 是隔离的：每个标签页拥有自己完整的 document 对象，互不共享引用
- 事件系统不跨页：CustomEvent、dispatchEvent 等仅限当前 JS 执行上下文
- data-* 属性不是通信通道，只是临时标记，不能持久化也不能广播
BroadcastChannel 的创建时机与频道名必须严格一致
它不嵌入 HTML 结构，而是在 JS 运行时创建，且频道名大小写敏感、全字符匹配。只要两个页面都执行了 new BroadcastChannel('ui-state')，哪怕一个在 /login.html、一个在 /dashboard/index.html，只要同源就能互通。
典型错误：
- 页面 A 用
new BroadcastChannel('auth')，页面 B 用new BroadcastChannel('Auth')→ 通信失败 - SPA 中路由切换时反复 new 实例但没
close()→ 多个监听器堆积，消息被重复处理 - 频道名用了变量拼接如
new BroadcastChannel(`channel-${env}`)，而 env 在不同页不一致 → 频道隔离
建议：频道名硬编码为语义字符串（如 'theme-sync'、'logout-broadcast'），避免动态生成。
Storage 事件不是替代方案，而是补充手段
localStorage 本身不通信，storage 事件只是浏览器对“其他同源页改了 localStorage”这一动作的通知机制。它和 BroadcastChannel 一样不发给自身，但有本质差异：
-
BroadcastChannel.postMessage()发送任意结构化数据（含函数序列化后字符串、Blob URL）；storage事件只带key、newValue（字符串）、oldValue（字符串） - 必须手动把消息塞进
localStorage.setItem('msg', JSON.stringify({...}))，再靠监听event.key === 'msg'解析 —— 多一层序列化/反序列化，且无法传二进制 - 低频可用，但频繁 setItem 会触发磁盘 I/O，尤其在低端安卓 WebView 中易卡顿；
BroadcastChannel是纯内存操作
所以不要用 storage 事件“模拟”广播，该用 BroadcastChannel 就直接用。
真正影响通信成败的，是 origin 而不是 HTML 文件路径
两个页面能否通信，只取决于三要素是否完全相同：protocol（http/https）、host（域名）、port（端口）。/a/index.html 和 /b/c.html 可以通；https://example.com 和 http://example.com（协议不同）绝对不通；localhost:3000 和 127.0.0.1:3000（host 不同）也不通。
容易被忽略的点：
- 开发时用
file://协议打开 HTML 文件 → 每个文件都是独立 origin，BroadcastChannel直接抛ReferenceError（Safari 甚至不支持） - Vite / Webpack Dev Server 默认启 HTTPS 时，若本地证书未信任，浏览器可能降级为
http，导致同域名下出现混协议通信失败 - 使用
ngrok或localtunnel做外网调试时，务必确认所有标签页访问的是同一 tunnel 地址（如https://abc123.ngrok-free.app），而非混合localhost和隧道地址
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
