BroadcastChannel 是 HTML5 同源页面间轻量通信机制，需确保协议、域名、端口完全一致，正确处理收发逻辑、消息结构、生命周期及兼容性问题。
BroadcastChannel 是 HTML5 原生提供的轻量级通信机制，专为同源页面间广播状态变更而设计。它不依赖服务器、不轮询、不污染 localStorage，适合登录态、主题切换、实时通知等场景。关键在于“同源”和“正确收发逻辑”，而不是单纯调用 API。
确保真正同源，避免静默失效
同源指协议、域名、端口三者完全一致。常见陷阱包括：
- localhost 和 127.0.0.1 被视为不同源，即使端口相同
- HTTP 与 HTTPS 混用（如 http://example.com 和 https://example.com）无法互通
- Vite/HMR 热更新可能临时启用不同端口或 iframe，导致 channel 隔离
- 频道名大小写或空格不一致（'auth' 和 'Auth ' 是两个通道）
发送端：只在真实状态变更时广播，带防重字段
不要只在登录成功时发 'login'，登出、token 过期、被踢出等都需统一广播。消息结构建议包含 type、timestamp 和可选业务标识：
- type：明确语义，如 'logout'、'theme_change'、'token_expired'
- timestamp：防止页面重载后收到旧消息误触发
- userId 或 sessionId：便于接收方做业务校验，避免全局广播影响无关用户
- 避免高频重复发——例如监听 storage 事件再转发，容易形成循环
接收端：不立即刷新，优先保用户数据
收到登出类消息后直接 location.reload() 或跳转，会丢失表单输入。更稳妥的做法是：
- 先更新内存状态（如 store.setState({ isLoggedIn: false })），不操作 DOM
- 检查是否存在未保存内容（如 document.querySelectorAll('[data-dirty="true"]')）
- 弹出确认提示，提供“保存后退出”或“强制登出”选项
- 结合 visibilitychange 事件，在页面切回可见时再展示提示，避免用户切走时无感知
- 加 event.source !== self 判断，规避部分旧版 Chrome 自己发自己收的问题
生命周期管理：单例 + 显式关闭
每个页面应只持有一个 BroadcastChannel 实例，且必须在合适时机关闭：
- 在模块顶层定义常量频道名，如 const CHANNEL_NAME = 'app-state-sync'
- 避免在函数内反复 new BroadcastChannel()，否则产生多个监听器，引发重复处理或内存泄漏
- 在页面卸载前（如 beforeunload）调用 bc.close()，尤其在 Safari 和旧版 Edge 中，不关闭可能导致 InvalidStateError
- 监听 error 事件，捕获 NotSupportedError（如 Safari 15.4 之前）或 DataCloneError（消息超大小限制）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
