data-* 属性只能存储字符串，存数组或对象需用 json.stringify() 序列化，读取时用 json.parse() 反序列化并加 try/catch；属性名自动驼峰转换，如 data-user-id 对应 dataset.userid；不适用于大量、敏感或复杂数据。
data-* 属性只能存字符串，别想直接塞数组或对象
HTML5 的 data-* 属性本质是 DOM 字符串属性，浏览器会把任何赋值自动转成字符串。哪怕你写 el.dataset.items = [1, 2, 3]，最终存进去的是 "1,2,3"（调用 toString()），不是 JSON。这是最常被误以为“能存结构化数据”的地方。
常见错误现象：
– 页面初始化时读 dataset.config，得到 "[object Object]"
– 用 JSON.parse() 解析失败，报 SyntaxError: Unexpected token o
- 必须手动序列化：写入前用
JSON.stringify() - 读取后必须手动反序列化：用
JSON.parse()，且要加try/catch - 注意空值：
dataset.xxx读不到时返回undefined，不是null或空字符串
JSON.stringify() 是唯一靠谱的序列化方式
别用 toString()、join() 或手拼字符串——它们无法处理嵌套对象、函数、undefined、Date、RegExp 等。只有 JSON.stringify() 能保结构（在 JSON 支持范围内）。
使用场景：存配置项、临时状态、服务端预置参数等轻量结构化数据
立即学习“前端免费学习笔记（深入）”；
- 支持对象、数组、数字、布尔、null；不支持
undefined、function、Symbol、Date（会变字符串）、NaN（变null） - 遇到不可序列化字段会静默丢弃，不会报错 —— 所以建议校验原始数据再存
- 如果值含用户输入，注意 XSS 风险：虽然
data-*不参与 HTML 渲染，但若后续拼进 innerHTML 就危险了
示例：el.dataset.config = JSON.stringify({ theme: "dark", tabs: ["home", "profile"] });
读取：const config = JSON.parse(el.dataset.config || "{}");
dataset 属性名自动驼峰转换，别硬写中划线
data-user-id 对应的 JS 属性是 dataset.userId，不是 dataset.user-id 或 dataset["user-id"]。这是 DOM 规范做的自动映射，写错就取不到值。
常见错误现象：
– el.dataset.user-id 报语法错误（减号当运算符）
– el.dataset["user-id"] 返回 undefined（因为 dataset 只暴露驼峰键）
- 中划线命名 → 驼峰规则：全小写，中划线后首字母大写，如
data-api-key→dataset.apiKey - 纯数字开头的 key 不合法（如
data-123），浏览器会忽略 - 避免用
dataset.constructor、dataset.toString这类原型方法名，会被覆盖
大量或深层嵌套数据别硬塞 data-*，改用其他机制
data-* 是为「少量、简单、标记性」元数据设计的。存几 KB 的 JSON 字符串会导致 DOM 膨胀、影响解析性能，也违背语义。
容易踩的坑：
– SSR 渲染时 HTML 体积暴增，首屏慢
– 某些框架（如 Vue）对 dataset 做响应式代理，大数据触发无谓更新
– 调试时 DevTools 显示截断，看不出完整内容
- 超过 1KB 的结构化数据，优先考虑
<script type="application/json"></script>块 - 需要频繁读写的，用
Map或闭包缓存，data-* 只存 ID 或 hash - 涉及敏感信息（token、密钥），绝对不要放 data-* —— 它完全暴露在 HTML 源码里
真正复杂的数据结构，DOM 属性从来就不是它的归宿。
