HTML元素需用静态data-id（如"cell-2-5"）标记唯一标识，localStorage仅存数据不自动同步DOM，须显式读取并手动更新元素状态，且仅存安全值如input.value或结构化状态，禁存outerHTML或dataset全量。
HTML 本身不带状态记忆能力，所有“记住”行为都得靠 JavaScript 配合浏览器存储机制实现；localStorage 是最常用、最直接的落地选择，但必须配合唯一标识、显式读写和 DOM 同步逻辑，否则刷新后状态就断了。
怎么给 HTML 元素打上可持久化的唯一 ID
没有稳定标识，就无法把状态和具体元素对应起来。不能依赖 DOM 位置（比如第 3 行第 2 列），因为结构一变就错；也不能用随机生成的临时 ID（每次加载都变）。
- 在 HTML 中静态写死
data-id，例如<td data-id="cell-2-5">或<details data-id="faq-7"> - 避免用
id属性——它要求全局唯一，而组件可能被多次复用，容易冲突 - 如果元素由 JS 动态生成，必须在插入 DOM 前就设好
data-id，不能等DOMContentLoaded后再补 - 值建议用语义化字符串，如
"task-123"、"panel-theme-setting"，别用纯数字或时间戳
为什么 localStorage.setItem() 之后还得手动同步到 DOM
localStorage 只存数据，不自动更新页面。你存了 {"cell-2-5": "green"}，但页面上的 <td data-id="cell-2-5"> 还是原样，除非你主动去查、去设 class 或属性。
- 页面加载时，必须显式调用
localStorage.getItem()，解析后遍历所有带data-id的元素，匹配并应用状态 - 别在
DOMContentLoaded前读取 —— 此时 DOM 还没就绪，querySelectorAll('[data-id]')可能为空 - 对
details这类原生控件，要用setAttribute('open', '')/removeAttribute('open')，而不是赋值details.open = true—— 后者不触发渲染 - 对 checkbox，要设
checkbox.checked = true，但前提是先从localStorage读出该账号对应的 remember 状态，且需绑定到具体用户名，不能全局共用一个 key
哪些状态能直接存，哪些必须拆解提取
不是所有 DOM 状态都能直接 dump 进 localStorage。直接存 outerHTML 或整个 dataset 是常见错误，会丢数据、增体积、难维护。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全存：控件的显式值，如
input.value、textarea.value、select.value、details.hasAttribute('open') - ✅ 安全存：结构化 UI 状态，如
{"activeTab": "settings", "expandedPanels": ["log", "config"]} - ❌ 别存：
element.outerHTML—— 丢失input当前输入、contenteditable光标、动态 class - ❌ 别存：
element.dataset全量 —— 它只是代理对象，不反映真实属性值，且含大量无关字段 - ⚠️ 注意类型：存进去的是字符串，读出来要
JSON.parse()；布尔值存"true"，别存true（会转成"true"字符串）
data-* 属性到底能不能当状态容器用
data-* 属性本身不持久，也不响应变化，它只是个静态标记。想靠 dataset.foo = 'bar' 实现状态记忆，注定失败。
- 修改
dataset不会真正写入 DOM 属性，DevTools 里看不到变化，服务端也拿不到 - 真要写入，必须用
element.setAttribute('data-foo', 'bar')；读取统一用element.getAttribute('data-foo')，别混用dataset -
data-适合存初始化配置（如data-theme="dark"）、组件类型（data-component="chart"），不适合存用户实时操作结果 - 需要监听变化？
data-没内置机制，得自己用MutationObserver或绑定到 Custom Element 的attributeChangedCallback - 敏感信息、长文本、嵌套对象 —— 全部避开
data-，交给localStorage或IndexedDB
真正麻烦的不是存，而是“存什么”和“什么时候存”。用户点一下就立刻写 localStorage，频繁操作会拖慢；等页面卸载再存，又怕崩溃丢数据。防抖保存、分层结构、键名隔离（比如按用户名 + 组件名拼 key），这些细节才是状态记忆不出错的关键。
