html data属性值必须用引号包裹，否则含空格、特殊字符或数字开头时会解析失败；javascript读取结果恒为字符串，复杂数据需json序列化，且不可存储敏感或大量信息。
data属性值必须用引号包裹
HTML data- 属性的值本质是字符串，但浏览器解析时不会自动补引号。如果值含空格、特殊字符或以数字开头，不加引号会导致解析失败或截断。
错误写法：<div data-id="123abc"> → 浏览器可能只读到 <code>data-id="123"，abc 被当成另一个属性或报错；<div data-name="John" doe> → <code>Doe 会被当作独立属性名。
正确做法始终使用双引号（或单引号）：
<div data-id="123abc" data-name="John Doe" data-config='{"theme":"dark"}'></div>
- 双引号更通用，尤其当值里含单引号（如
O'Reilly）时可直接写"O'Reilly" - 单引号适合值中大量双引号（如内联 JSON），避免转义
- 不要混用或省略——哪怕值是纯数字（
"42"）或布尔字符串（"true"），也必须加引号
JavaScript读取时自动转成字符串，无需额外处理
通过 dataset API 或 getAttribute() 读取 data- 属性，结果永远是字符串类型，哪怕原始值是 "123" 或 "false"。
示例：
const el = document.querySelector('[data-id="123abc"]');<br>console.log(el.dataset.id); // "123abc"（string）<br>console.log(el.dataset.count); // "42"（string，不是 number）<br>console.log(el.dataset.active); // "false"（string，不是 boolean）
-
dataset会自动把连字符转为驼峰（data-user-id→dataset.userId），但值仍是字符串 - 想转成数字？显式用
Number(el.dataset.count)或一元加号+el.dataset.count - 想转成布尔？别依赖字符串相等（
el.dataset.active === "true"），因为"false"也是真值；应明确判断：el.dataset.active === "true"
存储复杂数据（如对象、数组）要先序列化
HTML 属性不能存原生对象或数组，必须转成字符串。最常用的是 JSON.stringify()，读取时再 JSON.parse()。
错误写法：<div data-config="{theme: 'dark'}"> → 单引号不合法，且未转义，解析失败。
<p>正确写法：</p>
<pre class="brush:php;toolbar:false;"><div data-config='{"theme":"dark","mode":"compact"}'></div></pre>
<ul>
<li>写入前必须 <code>JSON.stringify()，确保格式合法、引号闭合、特殊字符转义
JSON.parse()，否则只是普通字符串，无法访问 .theme
stringify 时被忽略或报错避免在 data 属性里存敏感信息或大量内容
data- 属性是公开的，任何用户都能在开发者工具里看到，且可能被爬虫或第三方脚本读取。
- 不要放 token、密码、用户 ID 等敏感字段
- 不要存大段 HTML、长文本或 Base64 图片——会显著增大 DOM 体积，拖慢渲染和 JS 遍历速度
- 如果需要传递结构化状态，优先考虑
Map+ 元素引用，或用模块级变量管理，而非塞进 data 属性
data 属性适合存轻量、声明式、非敏感的上下文标识，比如 data-track-id、data-status、data-sort-key —— 它不是数据库，也不是状态容器。
