data-属性必须以data-开头，仅允许字母、数字、连字符、下划线和冒号；连字符自动驼峰化；值恒为字符串，敏感信息严禁使用；IE11不支持dataset需回退getAttribute。
必须用 data- 开头的属性，其他写法浏览器直接忽略，JS 也读不到。
data-* 属性名怎么写才合法
只允许字母、数字、连字符（-）、下划线（_）和冒号（:；极少用），且必须以 data- 起始。
-
data-user-id✅ 合法，JS 中读作dataset.userId -
data-apiKey❌ 非法，浏览器不识别，DOM 上看不到 -
user-id或dataUserId❌ 没有data-前缀，会被当成无效属性丢弃 -
data-foo-bar-baz→ JS 中是dataset.fooBarBaz，连字符自动驼峰化 - 别写
data-class这类已存在的全局属性，语义冲突且易出错
设置自定义属性的两种方式：setAttribute vs dataset
dataset 读取方便但不能新增属性；setAttribute 才是真正“写入 DOM”的动作。
- 首次添加新属性（比如
data-action），必须用：btn.setAttribute('data-action', 'edit') - 已存在属性（HTML 里写了或之前用
setAttribute设过），才能用：btn.dataset.action = 'delete' - 错误写法：
btn.dataset.newProp = 'value'→ DOM 不生成data-new-prop，getAttribute('data-new-prop')返回null - 删属性：用
delete btn.dataset.userId或btn.removeAttribute('data-user-id')
值永远是字符串，布尔/数字要手动转换
哪怕你写 data-count="42" 或 data-active="true"，JS 里拿到的仍是字符串 "42" 和 "true"。
立即学习“前端免费学习笔记（深入）”；
- 需要布尔值？用：
btn.dataset.isActive === 'true'或JSON.parse(btn.dataset.isActive) - 需要数字？用：
Number(btn.dataset.count)或+btn.dataset.count - 读取不存在的属性（如
btn.dataset.missing）返回空字符串""，不是undefined - 存对象？先
JSON.stringify(obj)再写入，读取时JSON.parse(btn.dataset.config)
哪些东西绝对不该塞进 data-*
它本质是公开 HTML 源码的一部分，右键“查看网页源代码”就能全看到。
- 敏感信息：JWT token、密码、手机号、邮箱、API key —— 全部禁止
- 大量数据：整个用户 profile 序列化后塞进
data-user-info，会拖慢首屏解析和 JS 解析速度 - 二进制内容：base64 图片、加密密文 —— 体积膨胀，无压缩，还暴露原始结构
- 适合的场景：简单标识类参数，比如
data-item-id="105"、data-modal-target="#edit-form"、data-status="pending"
最容易被忽略的是：连字符转驼峰的规则在大小写混用时会失效（data-UserId → dataset.userid 全小写），还有 dataset 在 IE11 完全不可用 —— 如果项目还要兼容老浏览器，所有读取都得 fallback 到 getAttribute。
