data-id仅是静态标记，不能自动绑定localStorage；必须显式用dataset.id读取、setItem存值、遍历元素getItem并手动同步DOM状态，否则key与元素脱钩导致状态错配。
data-* 属性本身不能作为唯一标识保存状态，它只是 DOM 上的静态标记；真要持久化，必须配合 localStorage + 稳定的 data-id 字符串 + 显式读写逻辑。
为什么不能直接用 data-id 当 localStorage 的 key
data-id 是 HTML 里写的字符串，比如 data-id="task-42"，它本身不自动关联任何存储行为。你改了 element.setAttribute('data-id', 'task-43')，localStorage 里那个 "task-42" 的值还在，但已经没人认领了——key 和元素脱钩了。
常见错误现象：localStorage.getItem('task-42') 能取到值，但页面上找不到 data-id="task-42" 的元素，或者多个元素用了同一个 data-id，导致状态错配。
- data-id 必须在 HTML 静态写出，或 JS 插入前就设好，不能靠运行时动态生成再补
- 禁止在循环渲染中写死相同
data-id，比如v-for里写data-id="item" - 服务端模板或 JS 拼接时，务必拼入唯一上下文，如
data-id="item-{{post.id}}"或data-id="panel-${uuid()}"
data-id 命名必须满足哪些硬性条件
浏览器只认符合规范的 data-* 属性名，命名不对，dataset 就读不到，querySelector('[data-id]') 也匹配失败。
立即学习“前端免费学习笔记（深入）”；
- 必须全小写 + 连字符，
data-user-id✅；data-userId❌（驼峰被忽略） - 不能以数字开头：
data-123-id合法但难读，推荐data-id-123 - 避免连续连字符：
data-foo--bar会被转成fooBar，语义丢失 - 别混用点号、冒号：
data-user.name或data-btn:submit—— CSS 和 querySelector 都会解析失败
localStorage 存取时如何安全绑定 data-id
存的时候只写 value，取的时候必须主动查 DOM 并手动同步。没有“自动绑定”这回事。
- 存：用
localStorage.setItem(el.dataset.id, JSON.stringify(state))，前提是el.dataset.id存在且非空 - 取：先
document.querySelectorAll('[data-id]')，再遍历每个元素，用localStorage.getItem(el.dataset.id)查值，再解析并设置对应 DOM 状态 - 对
<details>，要用el.hasAttribute('open')判断，设状态用el.setAttribute('open', '')，不是el.open = true - 对
<input type="checkbox">，必须设cb.checked = JSON.parse(stored).checked，不能只存布尔字面量
容易被忽略的类型转换和 dataset 陷阱
dataset 返回的全是字符串，不做转换直接比较或计算，90% 出错。
-
el.dataset.count === 42→ false，得写Number(el.dataset.count) === 42 -
el.dataset.isActive === 'true'才是正确判断，=== true永远不成立 - 修改
dataset不会更新 DOM 属性，必须用el.setAttribute('data-count', '43') - 混用
dataset.count = '43'和setAttribute('data-count', '44')会导致后续dataset.count仍返回旧值
真正可靠的流程是：HTML 写死 data-id → JS 用 dataset.id 读取 → 存进 localStorage → 页面加载后遍历所有 [data-id] 元素，逐个查、解析、设状态。中间任何一环断掉，状态就丢了。
