SessionStorage 本来就不跨标签页，别指望它自动同步
SessionStorage 是按浏览上下文（即每个标签页、iframe 或窗口）隔离的，同域下新开一个标签页，sessionStorage 就是全新实例，读不到上一个标签页写的数据。这不是 bug，是规范行为。想靠它做“同域多标签通信”，直接失败。
常见错误现象：sessionStorage.setItem('user', 'alice') 在标签 A 写入，切换到标签 B 后 sessionStorage.getItem('user') 返回 null，以为是代码写错了，其实逻辑就错了。
使用场景：只适合单页内临时状态缓存，比如表单草稿、折叠面板开关、未提交的筛选条件——且不期望用户开多个标签操作同一份数据。
用 BroadcastChannel 实现轻量级同域标签间通信
BroadcastChannel 是目前最直接、兼容性够用（Chrome 54+、Firefox 38+、Safari 15.4+、Edge 79+）的原生方案，专为同源多上下文通信设计。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 创建频道名必须一致且合法（只含字母、数字、下划线、破折号），例如
new BroadcastChannel('auth-channel') - 监听前务必先绑定
onmessage，再调用postMessage，否则可能丢掉首条消息 - 发送对象需可序列化，不能传函数、
undefined、Symbol或循环引用对象 - 注意页面卸载时调用
channel.close()，避免内存泄漏
示例：同步登录态变更
const bc = new BroadcastChannel('auth');
bc.addEventListener('message', (e) => {
if (e.data.type === 'LOGOUT') {
sessionStorage.removeItem('token');
}
});
// 其他标签页触发登出时广播
bc.postMessage({ type: 'LOGOUT' });
localStorage + storage 事件只能捕获“外部写入”，不能替代主动同步
localStorage 确实跨标签共享，但它的 storage 事件有个关键限制：**仅在其他同源窗口修改了 localStorage 时触发，当前窗口自己改的不会触发**。这意味着你不能靠它“自动刷新当前页状态”。
容易踩的坑：
- 在当前页调用
localStorage.setItem('theme', 'dark')，但没监听到storage事件 → 因为事件不响应自身写入 - 误以为
storage事件能实时反映所有变化 → 它不保证顺序，也不保证及时（尤其页面后台运行时可能延迟） - 在 Safari 私密模式下，
localStorage可能直接抛错，storage事件根本不会工作
所以它适合做“被动通知”，比如提示用户“其他标签已退出，请刷新”，但不适合驱动 UI 实时更新。
复杂场景下别硬扛，该用状态管理就用状态管理
如果项目已用 React + Redux、Vue + Pinia 或 Svelte Store，多标签同步就不是单纯前端存储问题，而是状态一致性问题。这时候硬套 BroadcastChannel 或轮询 localStorage 很容易漏 case。
真正容易被忽略的地方：
- 页面恢复（如从 iOS 后台唤醒）、标签页被冻结后再激活时，
BroadcastChannel可能已断连，需重连或兜底检查 - 用户手动清空浏览器缓存或启用隐私模式，所有机制都会失效，得有降级逻辑（比如强制重新登录）
- 多个 iframe 跨上下文通信时，
BroadcastChannel默认不穿透 iframe 边界，需显式传递channel实例或改用window.postMessage
事情说清了就结束。
