data-*属性本身不持久化，刷新即丢；它只是dom静态字符串快照，需js事件监听+setattribute/removeattribute显式管理，跨刷新保留须配合localstorage。
data-* 属性本身不记录状态，必须配合 JavaScript 事件监听 + setAttribute 才能真正“记录”选中行为；只写 data-selected 在 HTML 里，页面一刷新就清零。
为什么直接写 data-selected="true" 不算“记录”
HTML 中的 data-* 是静态声明，浏览器不会自动更新它。你手动在标签里写 data-selected="true"，只是初始值；用户点击后如果不调用 JS 修改，这个属性永远不变——它不会随交互自动翻转，也不参与表单提交，更不会被 localStorage 记住。
- 常见错误：给
<li>加上data-selected="true"就以为“已记录”，结果点击其他项时既没清除旧值，也没设置新值 - 真实场景中，“记录”意味着：点击触发、属性变更、后续可读取、刷新后能恢复（需额外搭配 localStorage）
-
dataset.selected = 'true'写法在部分旧 Safari 中不触发 CSS 重绘，应优先用setAttribute('data-selected', 'true')
用 setAttribute 和 removeAttribute 管理选中状态
这是最可靠、兼容性最好、DevTools 里一眼可见的方式。不要依赖 dataset 赋值，它在某些环境下不同步 DOM 属性。
- 选中某行：
tr.setAttribute('data-selected', 'true') - 取消选中：
tr.removeAttribute('data-selected')（比设为'false'更语义清晰） - 判断是否选中：
tr.hasAttribute('data-selected')，而不是tr.dataset.selected === 'true'（避免字符串陷阱） - 批量操作前先缓存：
const rows = document.querySelectorAll('tbody tr'); rows.forEach(row => { const isSelected = row.hasAttribute('data-selected'); ... })，避免循环中反复查 DOM
如何让选中状态“跨刷新保留”
单纯靠 data- 属性做不到持久化。要记住用户上次点了哪几行，得把 data-id 和选中状态一起存进 localStorage，再在页面加载时读取并还原。
- 每行必须有唯一标识：
<tr data-id="order-1024">，不能只靠索引或 class<li>保存逻辑示例：<code>localStorage.setItem('selectedRows', JSON.stringify(['order-1024', 'order-1025'])) - 恢复逻辑（放在
DOMContentLoaded后）：JSON.parse(localStorage.getItem('selectedRows') || '[]').forEach(id => { document.querySelector(`[data-id="${id}"]`)?.setAttribute('data-selected', 'true') }) - 注意：不要存整个
dataset或outerHTML，体积大、解析慢、易出错 - 样式写法：
tr[data-selected] { background-color: #e6f7ff; }（注意无空格） - 避免写
tr[data-selected="true"]—— 因为用removeAttribute清除后，data-selected="false"仍是真值，CSS 会继续匹配 - 如果需要区分“部分选中”，可用
data-selection="partial"，再配[data-selection="partial"]选择器 - IE11 支持
[data-selected]，但不支持[data-selected^="val"]这类高级语法
CSS 用 [data-selected] 做视觉反馈最干净
比起用 class 如 .is-selected，属性选择器更聚焦、无样式污染风险，且服务端直出就能生效。
真正容易被忽略的是：data 属性只是容器，不是记录器；所有“记忆”动作都得由 JS 显式驱动，且必须处理好 DOM 存在性、属性同步时机、字符串类型陷阱这三关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
