HTML原生属性无法跨页面共享状态，必须依赖localStorage存储数据并用storage事件同步；通过data-sync属性映射键名，配合初始化读取、input/blur监听写入、storage事件响应更新，实现多页状态一致。
HTML 原生属性本身不能跨页面共享状态——它们只作用于当前 DOM 节点，刷新或跳转即丢失。真正起作用的是配合 localStorage + storage 事件，再用 HTML 属性（如 data-sync、checked、value）做“状态映射”和“自动绑定”的桥梁。
为什么不能只靠 checked 或 value 属性同步多页？
这些属性是“静态快照”，只反映页面加载时的初始值。用户在 page1 修改了 ，page2 不会自动变成 checked——除非你手动读取 localStorage 并设置它。
常见错误现象：
– page1 切换暗色模式后，新开的 page2 仍是亮色
– 表单页面填了一半关掉，再打开另一个表单页，输入框空空如也
– 多个标签页勾选同一组选项，只有当前页生效，其他页没响应
- HTML 属性不广播、不持久、不监听变化，纯属渲染层控制
- 跨页同步必须依赖浏览器存储机制（
localStorage或sessionStorage）作为唯一可信数据源 -
storage事件才是触发“其他页更新 DOM 属性”的关键钩子
用 data-sync + localStorage 实现自动映射
给需要同步的元素加 data-sync 属性，值为 localStorage 的 key 名，再写一段通用初始化逻辑，就能让所有页面自动对齐状态。
示例 HTML（两页都用）：
<input type="checkbox" id="theme-dark" data-sync="pref-theme-dark"><input type="text" id="user-name" data-sync="form-username">
共用 JS（每个页面都引入）：
// 初始化：从 localStorage 读值并写入对应属性
document.querySelectorAll('[data-sync]').forEach(el => {
const key = el.getAttribute('data-sync');
const saved = localStorage.getItem(key);
if (saved !== null) {
if (el.type === 'checkbox') {
el.checked = saved === 'true';
} else {
el.value = saved;
}
}
});
// 同步：输入/切换时存入 localStorage，并广播变更
document.addEventListener('input', e => {
const el = e.target;
const key = el.getAttribute('data-sync');
if (key) {
const val = el.type === 'checkbox' ? el.checked.toString() : el.value;
localStorage.setItem(key, val);
}
});
// 其他页变更时响应（storage 事件）
window.addEventListener('storage', e => {
document.querySelectorAll(`[data-sync="${e.key}"]`).forEach(el => {
if (e.newValue === null) return;
if (el.type === 'checkbox') {
el.checked = e.newValue === 'true';
} else {
el.value = e.newValue;
}
});
});
-
data-sync是约定键名，避免硬编码 key 字符串散落各处 - checkbox 必须用
.checked = true/false，不能只改checked属性（否则不触发 UI 变化） -
storage事件不会在触发修改的页面自身上触发，所以必须靠初始化补全
用 contenteditable 配合 localStorage 实现跨页可编辑区同步
如果某段文本需要多页同时可编辑（比如共享笔记），contenteditable 提供原生编辑能力，但内容仍要靠 localStorage 持久化和同步。
示例：
<div contenteditable="true" data-sync="shared-note">初始内容</div>
JS 补充逻辑：
- 页面加载时，用
localStorage.getItem('shared-note')替换innerHTML - 监听
blur（而非input）事件，防高频触发；延迟 300ms 再setItem -
storage事件中，用innerHTML = e.newValue更新所有同 key 元素 - 注意 XSS：若内容来自用户，渲染前需做 HTML 转义或使用
textContent+innerText替代
最易被忽略的一点：所有页面必须确保在 DOM ready 后才执行初始化读取，否则 querySelectorAll('[data-sync]') 找不到元素，后续 storage 事件来了也无处落脚。别把初始化逻辑塞在 <script></script> 标签顶部而没加 DOMContentLoaded 或 defer。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
