前端与浏览器 / 进阶

多标签页通信：BroadcastChannel、storage 与锁

比较多标签页通信方案，设计登出通知、状态同步和单实例后台任务。同步消息容易，同步状态与所有权才是真正难点。

8 分钟BroadcastChannel · Web Locks · Storage Event · Tabs

消息不是状态

新打开的标签页收不到历史广播，因此真实状态应存放在服务端、IndexedDB 或其他可读取位置。广播只负责提示状态可能已变化，接收方再重新读取。消息可能重复、乱序或在页面冻结后延迟到达。为事件增加 id、版本和时间戳，处理函数应具备幂等性。

EXAMPLE / 01BroadcastChannel

const channel = new BroadcastChannel('account-events');

export function announceLogout() {
  channel.postMessage({ type: 'logout', at: Date.now(), version: 1 });
}

channel.addEventListener('message', event => {
  if (event.data?.type === 'logout') {
    clearPrivateState();
    location.assign('/login');
  }
});

把实现拆成可验证的小块

接收逻辑必须容忍重复与延迟

最后回到真实页面检查

互斥任务优先交给 Web Locks 管理