HTML无法实现跨页面标签页切换，需用localStorage+storage事件同步状态；data-sync是约定而非魔法，各页面须初始化读取并监听storage事件，注意兼容性与降级逻辑。
HTML 本身不提供跨页面标签页切换能力——所谓“跨页面标签页”，本质是多个独立 HTML 页面（比如 page1.html、page2.html）在浏览器中同时打开，它们彼此隔离，DOM、JS 执行环境、表单状态全不共享。你不能用纯 HTML 属性或 CSS 实现“点击 page1 的按钮，让 page2 的某个面板展开”。真正要解决的是：如何让多个页面感知并响应同一份状态变化。
为什么 data-sync + localStorage 是最可行的起点
因为它是唯一兼容所有现代浏览器、无需服务端、且能持久化的方案。data-sync 不是魔法，它只是个约定：告诉 JS “这个元素该映射到 localStorage 里哪个 key”。实际同步靠的是 localStorage.setItem() 触发的 storage 事件。
- 必须在每个页面都执行初始化逻辑：遍历所有
[data-sync]元素，读取对应localStorage.getItem(key)，再写入 DOM 属性（如el.checked、el.value） - 必须监听
storage事件：当其他页面调用localStorage.setItem('pref-theme-dark', 'true')，当前页面就能捕获并更新对应元素 - 注意：
storage事件不会在触发它的页面自身触发，只通知其他同源页面——这是设计使然，不是 bug - 如果用户清空了 localStorage 或禁用了它，整个同步链就断了，得有降级逻辑（比如 fallback 到 URL 参数或默认值）
如何避免 checkbox / input 值不同步的典型错误
常见现象是：page1 勾选了暗色模式，page2 还是亮色；或者输入框填了一半，新开 page3 是空的。根本原因在于只写了写入逻辑，漏了读取和响应。
- 写入不能只靠
input事件：对type="checkbox"必须监听change，对type="text"建议用input+blur组合，防止失焦未保存 - 读取必须在 DOM 加载后立即执行：不能等
DOMContentLoaded之后才查 localStorage，否则页面会闪一下初始态（比如 checkbox 默认未勾选，0.1 秒后才变勾选） - 不要直接操作
el.setAttribute('checked', 'checked')：这只会改属性，不改 DOM 状态；应该用el.checked = true - 多类型控件需分支处理：
select要设el.value，radio组要按 name 查找并比对value，不能一概而论
要不要上 BroadcastChannel？看你的场景
BroadcastChannel 能发瞬时消息（比如“现在立刻刷新购物车”），但它不持久、不跨域、且 Safari 对 beforeunload 中关闭 channel 支持不稳定。如果你只需要“数据最终一致”，localStorage + storage 足够；如果你需要“强实时响应+带 payload 的指令”，就得加 BroadcastChannel 作为补充。
立即学习“前端免费学习笔记（深入）”；
- 不要用
BroadcastChannel替代 localStorage 存数据：channel 消息不落地，关掉所有标签页就没了 - 推荐组合用法：数据存 localStorage（保证持久），控制指令走 BroadcastChannel（比如“清空缓存”“强制重载配置”）
- 务必在
window.addEventListener('beforeunload', ...)里调用channel.close()，否则可能引发内存泄漏或重复监听 - 兼容性兜底：Safari 15.4+、Chrome 54+、Firefox 38+ 支持；老版本可退回到
localStorage+ 定时轮询（不推荐，但可行）
最容易被忽略的一点是：同步逻辑必须和页面生命周期对齐。比如 SPA 中路由切换不会触发 storage 事件监听器重绑，但多页应用里每个 HTML 都要独立执行初始化 —— 少一个页面没加那段 JS，它就永远不同步。别假设“共用一个 JS 文件就万事大吉”，检查每个页面的 <script> 是否真实执行了。
