localStorage不自动同步，需用storage事件实现同源标签页间广播通知；当前页不触发事件，仅对setItem/removeItem/clear响应，新标签页须主动读取初始值并校验newValue，写入应封装防重复与循环，适用于主题、登出等轻量状态同步。
localStorage 本身不自动同步数据，但配合原生的 storage 事件，就能让同源下的其他标签页“感知”到变化——关键不是存，而是怎么监听、校验和响应。
storage 事件触发规则必须清楚
当一个标签页执行 localStorage.setItem('key', 'value') 时，**所有同源的其他已打开标签页**会触发 storage 事件，但**当前操作页自身不会触发**。这个特性决定了它天然适合做“广播通知”，而不是“状态镜像”。
- 只对
setItem、removeItem、clear三类操作响应，直接赋值（如localStorage.key = 'val'）无效 - 事件对象包含
key、oldValue、newValue、url和storageArea字段，其中url是触发页的地址，可用于简单来源过滤（但不可用于权限控制） - 无痕模式、第三方上下文或跨域 iframe 中通常不触发，需降级处理
监听必须搭配主动初始化
新打开的标签页收不到历史写入事件，所以不能只靠监听。必须在页面加载时主动读取当前 localStorage 值并应用，否则主题错乱、音量不对、倒计时显示为 0 等问题都会出现。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 例如主题切换：先执行
document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'light') - 再绑定监听：
window.addEventListener('storage', e => { if (e.key === 'theme') applyTheme(e.newValue) }) - 对
e.newValue做非空和格式校验，避免解析失败导致静默错误
写入要规范，避免漏触发或循环
浏览器可能对重复写入相同值做优化（尤其 Safari），导致 storage 事件不触发。同时，监听回调里再写入同一 key，容易引发 A→B→A 的无限同步。
立即学习“前端免费学习笔记（深入）”；
- 写入时加时间戳或随机后缀，比如
localStorage.setItem('volume', JSON.stringify({ value: 0.7, ts: Date.now() })) - 所有写操作统一走封装函数（如
setVolume(val)），内部完成本地更新 + localStorage 写入 - 监听回调中只读取、只更新视图或媒体元素，绝不调用
setItem同一 key
适用场景要选对，别硬套
storage 事件适合轻量、低频、状态型同步，比如主题、登录态、全屏提示、倒计时基准时间等。它不是消息总线，不适合聊天消息、高频进度、复杂结构体传输。
- 推荐用法：登出信号（
localStorage.setItem('logout', Date.now())），其他页收到后调用接口验证再跳转 - 不推荐用法：逐条推送聊天消息——发送页自己收不到事件，UI 无法刷新，必须换
BroadcastChannel - 补充建议：关键逻辑永远以服务端为准，localStorage 只作前端协同辅助，异常时可降级为内存变量
