data-* 属性仅作静态元数据槽位，不持久化；修改 dataset.xxx 不改变 html 源码，需 setattribute 才写入 dom；适合存轻量公开标识，不适合存敏感或结构化状态，持久化应交由 localstorage、indexeddb 或后端 api。
data-* 属性本身不持久化，刷新页面就丢；它不是状态容器，而是 DOM 上的静态元数据槽位。真要持久化状态，得靠 localStorage、IndexedDB 或后端 API —— dataset 只能帮你“标记”状态，不能“保存”状态。
为什么 dataset.xxx = 'val' 看似生效却没写入 HTML
你调用 element.dataset.userId = '123' 时，浏览器只更新了内存中 dataset 的代理副本，原始 HTML 的 data-user-id 属性值完全没变。DevTools 里看不到变化，服务端抓取 HTML 也拿不到新值。
- 真正写入 DOM 必须用
element.setAttribute('data-user-id', '123') - 读取建议统一用
element.getAttribute('data-user-id')，避免dataset缓存错乱（比如先设dataset.foo = 'a'，再setAttribute('data-foo', 'b')，后续dataset.foo还是返回'a'） -
dataset自动做连字符转驼峰（data-api-key→apiKey），但写属性名时仍要严格匹配原始大小写和连字符格式
data-* 在状态管理中适合存什么、不适合存什么
data-* 适合轻量、公开、低频变更的上下文标识，比如组件类型、初始配置、调试标记；不适合当状态容器或缓存层。
- ✅ 适合：
data-component="chart"、data-theme="dark"、data-loaded="true"—— 用于初始化逻辑或 CSS 选择器 - ❌ 不适合：
data-user-data='{"name":"","token":""}'—— 值过长拖慢 DOM 序列化，且敏感信息暴露在源码里 - ⚠️ 类型陷阱：所有值都是字符串，
data-count="42"读出来是"42"，不是数字；data-active="true"是字符串"true"，不是布尔值，需手动=== 'true'或JSON.parse()
如何让 data-* 参与真实生命周期响应
data-* 没有内置监听机制，想“响应变化”，必须自己绑定事件或结合 Custom Element 生命周期。
- 页面级使用：确保在
DOMContentLoaded后读取，避免 SSR 渲染未完成导致dataset为空 - Custom Element 中：声明
static get observedAttributes() { return ['data-user-id']; }（注意写完整属性名，不是userId） - 在
attributeChangedCallback(attrName, oldValue, newValue)里处理逻辑；首次挂载用this.getAttribute('data-user-id')读初始值 - 别在
constructor里操作 DOM 或发请求 —— 此时元素还没插入文档
真正需要持久化的状态，该交给谁
如果你的状态要跨页面刷新存在、支持异步加载、带类型或加密需求，data-* 就不该是主力载体。
- 简单键值对：用
localStorage.setItem('userTheme', 'dark')+localStorage.getItem('userTheme') - 结构化/大容量数据：用
IndexedDB，支持事务、索引和二进制存储 - 需服务端同步或权限控制：走后端 API，配合 XSS 过滤（如 DOMPurify）再入库
- 表单草稿类场景：可先用
data-*标记字段 ID，再把实际值批量序列化到localStorage，恢复时按 ID 映射回 DOM
最容易被忽略的是：data-* 和本地存储之间没有自动同步关系，任何“状态持久化”都得你显式桥接 —— 比如监听 input change，然后同时更新 dataset（用于 UI 标记）和 localStorage（用于持久化）。漏掉任意一环，就会出现 UI 和存储不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
