data-user-id必须全小写加连字符命名才被浏览器识别，JS通过el.dataset.userId访问；驼峰、下划线或大写均无效，读取需用getAttribute()兼容非常规命名，修改必须用setAttribute()而非dataset赋值。
直接用 data-user-id 存用户 ID 是可行的，但必须写对格式、读对方式、改对位置——错一个环节，JS 就拿不到值，或者拿到的是过期字符串。
data-user-id 属性怎么写才被浏览器识别
浏览器只认全小写 + 连字符的命名，其他写法等于没写：
-
data-user-id="123"✅ 正确，JS 中可通过el.dataset.userId访问 -
data-userId="123"❌ 含大写，DOM 中根本不存在，dataset.userId返回undefined -
data_user_id="123"❌ 下划线，同样被忽略 -
data-UID="123"❌ 大写 UID，dataset.uid拿不到，必须用el.getAttribute("data-UID")
读取时为什么 el.dataset.userId 经常是 undefined
不是 JS 写错了，是属性名或读取方式不匹配：
- HTML 里写了
data-user-id="123"，但 JS 用了el.dataset.userid（全小写）→ 返回undefined；正确是el.dataset.userId - 写了
data-2024-user-id="456"→ 必须用el.dataset["2024UserId"]，el.dataset.2024UserId是语法错误 - 想兼容所有命名（比如含数字、大写、下划线），最稳的方式是：
el.getAttribute("data-user-id")，它不转驼峰、不丢值、不静默失败
修改 data-user-id 值为什么 dataset 赋值没用
dataset 是只读映射，赋值不会更新 DOM 属性节点：
立即学习“前端免费学习笔记（深入）”；
-
el.dataset.userId = "456"→ 看似生效，但el.getAttribute("data-user-id")仍返回旧值，刷新后还原 - 真正写入 DOM 的唯一方式：
el.setAttribute("data-user-id", "456") - 删除必须用：
el.removeAttribute("data-user-id")；delete el.dataset.userId完全无效 - 混用会出问题：先
dataset.userId = "a"，再setAttribute("data-user-id", "b")，后续dataset.userId仍返回"a"（缓存未刷新）
存用户 ID 时最容易忽略的三个细节
用户 ID 看似简单，但类型、持久性、安全性常被轻视：
- 所有值都是字符串：
data-user-id="123"读出来是"123"，不是数字；需要 ID 做计算时得先+el.dataset.userId或Number() -
data-不自动持久化：页面刷新后，HTML 里的值还在，但 JS 修改过的值不会保存；真要跨刷新保留，得配合localStorage或后端 API - 不能存敏感标识：比如脱敏不彻底的手机号、邮箱、token；所有
data-属性都暴露在源码里，爬虫、调试工具、甚至普通用户右键“查看页面源代码”就能看到
