data-*属性能存数据但不私有，仅适合公开辅助信息；dataset自动驼峰转换且值恒为字符串，getattribute返回原始字符串；敏感或复杂数据应存js变量或map而非dom。
data-\* 属性到底能不能存私有数据？
能，但不是“私有”——data-* 属性是公开可读的 DOM 属性，浏览器控制台里一查就见，JS 也能直接 element.dataset.xxx 或 element.getAttribute('data-xxx') 拿到。它不加密、不隐藏、不防篡改，只适合存“页面渲染所需、无需保密、可被用户看到”的辅助信息。
dataset 和 getAttribute 读取方式有啥区别？
dataset 是语法糖，自动处理驼峰转换；getAttribute 是原始字符串读取，更直白可控。比如：data-user-id="123" → el.dataset.userId 可读，el.dataset['user-id'] 会报错；而 el.getAttribute('data-user-id') 总是返回 "123"（字符串）。
常见踩坑点：
-
dataset自动忽略前缀data-，且把连字符转为小驼峰，data-api-url→el.dataset.apiUrl -
dataset值永远是字符串，哪怕你写data-count="0"，el.dataset.count + 1会变成"01"（字符串拼接） -
dataset不支持动态新增带大写字母或下划线的 key（如data-UserID），会被忽略或转成小写
什么时候该用 data-\*，什么时候该用 JS 变量或 Map？
看数据生命周期和访问范围：
- 需要和 DOM 节点强绑定、且可能被 CSS 或事件委托用到（比如
[data-status="loading"]控制样式），用data-* - 纯逻辑中间状态、含敏感信息（token、用户手机号）、或结构复杂（对象/数组），别往 DOM 上挂，用
const state = new Map()或闭包变量存 - 组件级状态（如 React/Vue）优先走框架响应式系统，
data-*仅用于透传简单标识（data-testid测试用、data-track-id埋点用）
性能上：大量 data-* 属性不会拖慢渲染，但频繁读写 dataset 会触发 DOM 同步，不如本地变量快。
data-\* 在事件委托里怎么安全取值？
事件委托时，常通过 event.target 拿触发元素的 data-*，但要注意目标可能是子元素（比如按钮里的 span），而非你预期的容器。
实操建议：
- 用
event.target.closest('[data-action]')向上找最近的带属性的祖先，比直接event.target.dataset.action更可靠 - 始终校验存在性：
const el = event.target.closest('[data-id]'); if (!el) return; const id = el.dataset.id; - 避免在循环中反复调用
closest，可提前缓存或用事件代理绑定到父容器并设data-*在父级
真正容易被忽略的是：data-* 的值始终是字符串，JSON 字符串得手动 JSON.parse，且要包 try/catch——没人替你做类型兜底。
