dataset属性仅映射HTML中初始声明的data-*属性，动态设置不会同步到DOM；推荐用setAttribute/getAttribute确保数据持久化与兼容性。
dataset 属性只能读取 HTML 中已存在的 data-* 属性
JavaScript 的 dataset 是元素的只读属性，它映射的是 DOM 元素在 HTML 中**初始声明**的 data-* 属性。它不会自动反映后续用 JS 动态设置的值，也不会触发 DOM 更新同步——这是很多人误以为“赋值后 dataset 就能读到”的根本原因。
例如：
<div id="box" data-user-id="123" data-theme="dark"></div>此时
document.getElementById('box').dataset.userId 返回 "123"，dataset.theme 返回 "dark"。但如果你之后执行 el.dataset.newKey = "456"，它确实会写入，但不会生成对应 HTML 属性（即 el.outerHTML 里看不到 data-new-key），且部分旧版浏览器（如 IE）根本不支持该写入行为。
存取自定义数据推荐用 setAttribute / getAttribute
要确保数据真正写入 DOM 并可被其他逻辑（比如 CSS 选择器 [data-state="loading"] 或服务端渲染比对）识别，必须用标准属性操作方法：
-
el.setAttribute('data-loading', 'true')—— 写入后可在 HTML 源中看到，且兼容所有浏览器 -
el.getAttribute('data-loading')—— 总是返回字符串，包括null（注意不是undefined） - 读取布尔语义时建议显式判断：
el.getAttribute('data-disabled') !== null - 避免混用：
dataset.loading = 'false'和setAttribute('data-loading', 'false')效果相同，但前者不可靠，后者明确可控
dataset 的命名转换规则容易踩坑
dataset 会把 data- 后的连字符命名（kebab-case）自动转为驼峰（camelCase），且**忽略前导数字和特殊符号**：
立即学习“Java免费学习笔记（深入）”；
-
data-user-id→dataset.userId -
data-api-url→dataset.apiUrl -
data-123-name→dataset._123Name（Chrome 支持，但 Safari 可能返回undefined） -
data-_hidden→dataset._hidden（下划线保留，但语义模糊，不推荐）
反向不成立：你不能通过 dataset.userId = "456" 确保 data-user-id 属性被创建或更新——它可能静默失败，尤其在非 HTML 元素（如 SVG）或 Shadow DOM 中。
需要持久化或复杂结构？别硬塞 dataset
dataset 本质只适合存储简单、短小、字符串化的状态标记（如 data-status="error"）。遇到以下情况应换方案：
- 存对象/数组：
JSON.stringify({a:1})再塞进data-config？→ 解析易出错，无类型保障，建议用Map或闭包缓存 - 频繁读写性能敏感：
dataset访问比getAttribute略快，但差异微乎其微；真正瓶颈在 DOM 重排，而非属性读取 - 跨组件共享数据：用
CustomEvent+ 全局状态管理，或直接挂载到el.__customData = {...}（私有属性约定，不污染 DOM）
最常被忽略的一点：服务端渲染（SSR）页面中，初始 data-* 是可靠的；但客户端 JS 后续改写的 dataset 值，服务端完全感知不到——如果依赖这些值做首屏判断，逻辑就会断裂。
