data-*属性只支持字符串，json需手动序列化与解析；写入用json.stringify()，读取用json.parse()并加try/catch；推荐命名如data-json-user，注意引号转义。
data-* 属性只能存字符串，JSON 必须序列化
HTML 的 data-* 属性原生只支持字符串值，直接赋值 { "id": 1, "name": "Alice" } 会被自动转成 [object Object]——这是最常见的误用起点。浏览器不会帮你做 JSON 序列化或反序列化，这一步必须手动完成。
正确做法是：写入前用 JSON.stringify()，读取后用 JSON.parse()。注意空值、undefined、函数、Date 对象等无法被 JSON 安全序列化的类型会直接报错或丢失。
-
undefined、function、Symbol、BigInt在JSON.stringify()中会被忽略或抛错 - 含循环引用的对象会触发
TypeError: Converting circular structure to JSON - 推荐在
JSON.parse()外层加try/catch，避免因 HTML 被篡改或手误导致解析失败而阻断逻辑
如何安全地写入和读取 data-json 风格属性
别用 data-user 这种模糊命名，建议统一用 data-json-xxx（如 data-json-user）明确语义，也方便后续正则或工具识别。写入时注意引号嵌套问题——HTML 属性值本身用双引号，内部 JSON 字符串需转义双引号或改用单引号包裹。
示例：
<div id="item" data-json-user='{"id":1,"name":"Alice","tags":["admin","active"]}'>...</div>
对应 JS 读取逻辑：
const el = document.getElementById('item');<br>let user;<br>try {<br> user = JSON.parse(el.dataset.jsonUser);<br>} catch (e) {<br> console.warn('Failed to parse data-json-user:', e.message);<br> user = null;<br>}
dataset API 对连字符命名的自动转换规则
dataset 是个“驼峰化”代理对象，它把 data-json-user 自动映射为 dataset.jsonUser，把 data-api-url 映射为 dataset.apiUrl。但这个转换不处理大写字母后的连字符，也不支持数字开头或纯数字键名——比如 data-123-id 无法通过 dataset.123Id 访问（语法错误），得改用 getAttribute('data-123-id')。
- 连字符（
-）后紧跟字母 → 首字母大写，如data-user-info→dataset.userInfo - 连续多个连字符（如
data-foo--bar）会被当作一个分隔符，结果仍是dataset.fooBar -
data-json→dataset.json（合法），但data-json-2024→dataset.json2024（可读，但易与年份混淆，建议避免）
为什么不用 innerHTML 或自定义属性代替 data-*？
有人图省事把 JSON 塞进 innerHTML 或自定义属性（如 el.myData = {...}），但这破坏了数据与 DOM 的分离原则，且无法被 SSR、爬虫或 DevTools 的 Elements 面板直接查看。更重要的是：dataset 是标准 API，支持 CSS 属性选择器（如 [data-json-user]）、无障碍属性继承、以及未来可能的 declarative shadow DOM 兼容性。
真正需要警惕的是体积——单个 data-* 值不宜超过几 KB。过长的 JSON 会导致 HTML 文件膨胀、解析变慢，且 Chrome DevTools 在 Elements 面板中默认截断长 dataset 值，调试困难。若数据量大，应考虑用 <script type="application/json"></script> 块或 fetch 加载。
实际项目里最常被忽略的点：服务端渲染时没对 JSON 字符串做 HTML 实体转义，导致引号冲突或 XSS 漏洞。务必用服务端模板的安全输出函数（如 Nunjucks 的 |safe 或 EJS 的 ）或手动替换 " 为 "。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
