dataset适合存轻量静态UI关联数据如用户ID，禁存敏感信息；命名须全小写短横线分隔，JS访问用驼峰且值恒为字符串，写入推荐setAttribute以确保DOM真实更新。
用 dataset 在 DOM 节点上存取业务数据，关键不是“能不能写”，而是“怎么写才不踩坑”。它适合存轻量、静态、与 UI 强关联的上下文信息，比如用户 ID、状态标识、资源路径——但别存密码、token 或实时计数器。
命名要守规矩，否则 dataset 根本看不到
HTML 中 data-* 属性名必须全小写，用短横线分隔单词，且不能以数字开头：
- ✅ 合法：
data-user-id、data-api-url、data-order-status - ❌ 无效：
dataUserId（无短横线）、data-user_name（含下划线）、data-1id（数字开头）——这些属性不会出现在 dataset 对象里，访问会得undefined
浏览器会自动把 data-user-id 映射为 dataset.userId，把 data-api-url 映射为 dataset.apiUrl。注意：大小写不敏感，但 JS 访问时必须严格用驼峰形式。
读出来的永远是字符串，别信直觉
哪怕你在 HTML 里写 data-count="42" 或 data-active="false"，通过 dataset.count 拿到的也是 "42" 和 "false"，不是数字或布尔值。
- ❌ 错误判断：
if (el.dataset.active)→"false"是真值，条件成立 - ❌ 错误运算：
el.dataset.count + 1→"42" + 1得"421" - ✅ 正确做法：
Number(el.dataset.count)、el.dataset.active === "true"、JSON.parse(el.dataset.config)（仅当值是合法 JSON 字符串时）
写入要分清“映射”和“真实属性”
element.dataset 返回的是一个 DOMStringMap，看起来可读可写，但它的赋值只是“表面同步”：
- ✅
el.dataset.userId = "1001"确实会让dataset.userId变成"1001"，也会让 HTML 中出现data-user-id="1001" - ⚠️ 但它不是双向响应式：修改 dataset 不会触发 MutationObserver；某些框架或服务端渲染比对也认
getAttribute()，不认 dataset 的“幻影更新” - ✅ 更稳妥的写法：
el.setAttribute('data-user-id', '1001')—— 真实写入 DOM，兼容性好，CSS 选择器如[data-user-id="1001"]也能匹配
复杂值或特殊命名，绕开 dataset 直接用 getAttribute
当遇到这些情况，别硬套 dataset，直接上原生 API：
- 属性名含下划线、点号、连续短横线（如
data-user_name、data-config.v2）→el.getAttribute('data-user_name') - 值含前后空格或换行（dataset 会自动 trim，你可能需要原始值）→
el.getAttribute('data-desc') - 需要判断属性是否存在（dataset 返回空字符串或
undefined不明确）→el.hasAttribute('data-loaded')
getAttribute 返回原始字符串，包括 null（没该属性），比 dataset 更可控、更可预测。
