必须用 BroadcastChannel + localStorage 实现跨窗口购物车同步：localStorage 存全量数据，BroadcastChannel 仅广播轻量指令，配合可见性轮询、时间戳去重和组件卸载清理。
不能用“本地锁”实现跨窗口同步——浏览器没有提供跨标签页的互斥锁原语，所谓“本地锁”（如单例变量、闭包标志位）只在当前 JS 上下文有效，对其他窗口完全不可见。真正可行的是用 BroadcastChannel + localStorage 构建“状态广播+数据读取”的异步同步模型，购物车场景下重点解决“加购后多页不一致”和“后台页收不到消息”两个痛点。
核心逻辑：所有窗口都以 localStorage 为唯一事实源
购物车数据必须持久化写入 localStorage（例如 localStorage.setItem('cart', JSON.stringify(items))），BroadcastChannel 不传购物车全量数据，只广播轻量指令，比如 { type: 'CART_UPDATED', timestamp: Date.now() }。每个监听窗口收到后，主动从 localStorage 重新读取并解析，而不是信任消息体里的 payload。
- 避免消息丢失导致状态错乱：即使某次 postMessage 失败或被节流，只要 localStorage 数据已落盘，页面切回前台时仍能通过轮询补上
- 规避结构化克隆限制：购物车常含 Date、自定义类实例等，直接传可能被丢弃；而 localStorage 存字符串，兼容性无死角
- 天然支持新开标签页：新页初始化时直接读 localStorage，无需等待首次广播
处理后台标签页收不到消息的问题
Chrome 等浏览器会对非活跃标签页的 onmessage 进行节流甚至暂停，导致用户切回页面时购物车仍是旧状态。必须加可见性感知的兜底轮询：
- 监听
document.visibilityState，仅当值为'visible'时启动定时器 - 每 30 秒执行一次
localStorage.getItem('cart')，比对上次读取的 JSON 字符串是否变化（用JSON.stringify序列化后比较，而非引用） - 变化则触发 UI 更新，并更新本地缓存时间戳，避免重复渲染
防重复加购与快速连点的幂等设计
用户连续点击“加入购物车”，可能触发多次 postMessage，但频道不保证顺序和去重。解决方案是把业务逻辑和通信解耦：
- 加购操作先更新本地 cart 数组，再
localStorage.setItem持久化，最后发广播 - 广播消息不带商品 ID 或数量，只带类型和时间戳，接收方只做“重读”动作
- 组件内维护一个
lastSyncTime，收到广播后若event.data.timestamp <= lastSyncTime则忽略，防止旧消息覆盖新状态
生命周期管理与清理要点
React/Vue 组件卸载时必须关闭 BroadcastChannel，否则残留监听器会持续占用内存，且可能在组件重建后重复响应：
- 用
useEffect（React）或onBeforeUnmount（Vue）调用channel.close() - 不要在身份切换、路由跳转时 close 频道——同一用户会话中频道应长期存在
- 频道名统一为
'cart-sync'（全小写、无空格），大小写错误会导致多个逻辑频道并存
