HTML5中data-属性是传递额外数据的首选方案，原生支持、语义清晰；需遵循命名规范，通过dataset API读写更简洁，但值恒为字符串且不反映HTML源码变化。
HTML5中用data-属性传递额外数据最直接
浏览器原生支持、无需额外库、语义清晰，是绝大多数场景的首选。所有以 data- 开头的自定义属性都会被 HTML5 解析并保留在 DOM 中，可通过 JavaScript 的 dataset 或 getAttribute() 读取。
-
data-后只能跟字母、数字、连字符（-），不能有大写字母或下划线；例如data-user-id合法，data-userId和data_user_id会被忽略 - 带连字符的属性名在
dataset中自动转为驼峰：data-order-status→element.dataset.orderStatus - 值始终是字符串类型，需手动转换：
parseInt(el.dataset.count)、JSON.parse(el.dataset.config) - 避免存大量结构化数据（如长 JSON 字符串），影响可读性和调试效率
用dataset API读写比getAttribute/setAttribute更简洁
dataset 是专为 data- 属性设计的只读/可写对象，省去字符串拼接和类型判断，但要注意它不反映动态修改后的原始 HTML 字符串（仅更新 DOM 属性）。
const btn = document.querySelector('button');
btn.dataset.userId = '123';
btn.dataset.hasPermission = 'true';
btn.dataset.apiEndpoint = '/v2/users';
// 等价于设置：
//
- 写入时会自动添加
data-前缀，且把驼峰转为连字符格式 - 删除用
delete btn.dataset.userId，对应移除data-user-id - 不支持直接赋值对象或数组：
btn.dataset.meta = { a: 1 }会变成"[object Object]"
不要用innerHTML或outerHTML传数据——破坏结构且不可靠
有人试图把 JSON 嵌进标签内容或注释里，比如 ，这类做法看似灵活，实则违反 HTML 设计原则：
- 注释内容无法通过标准 DOM API 安全访问，
childNodes类型不稳定，容易被压缩工具清除 - 用
innerHTML插入含引号的 JSON 易引发解析错误，且每次更新都触发重排重绘 - 服务端渲染（SSR）或静态站点生成器（如 Next.js / Nuxt）可能提前剥离或转义特殊内容
- 无障碍（a11y）工具和搜索引擎不会解析注释或隐藏文本中的数据
复杂数据建议用JSON.stringify()序列化后存data-，但要控制长度
当必须传递嵌套对象（如配置项、初始状态），可以序列化为字符串再存入 data- 属性，前提是单个值不超过 ~4KB（避免影响首屏解析速度）。
立即学习“前端免费学习笔记（深入）”；
- 务必使用单引号包裹整个属性值，避免双引号 JSON 与 HTML 属性冲突
- 服务端输出时需确保 JSON 已正确转义（如 Python 的
json.dumps(..., separators=(',', ':'))） - 前端解析前应加 try/catch，防止因属性缺失或格式损坏导致脚本中断
- 超过 2 层嵌套或含函数/日期对象的数据，别硬塞进
data-，改用块更稳妥
实际项目里最容易被忽略的是：不同框架（React/Vue）对 data- 属性的处理策略不一致——Vue 模板中 v-bind: 可以绑定 data-，但 React 的 JSX 会过滤掉未声明的属性，必须显式用 data-* 写死。跨框架协作时，这点常导致数据“消失”。
