html data-* 属性仅用于挂载轻量静态字符串元数据，不存储敏感或需持久化信息；命名须全小写、连字符分隔，读取优先用 getattribute()，修改必须用 setattribute()。
HTML data-* 属性不能真正“存储用户信息”，它只负责在元素上挂载轻量、静态的字符串元数据；敏感、结构化、需持久化或跨刷新保留的数据，必须交给 localStorage、IndexedDB 或后端 API。
data-* 属性名怎么写才被浏览器识别
浏览器只解析符合严格命名规则的 data-* 属性：前缀 data- 后必须全小写，用连字符（-）分隔单词，不能含大写字母、下划线、点号或数字开头。
-
data-user-id→ ✅ 可读为el.dataset.userId -
data-api-key→ ✅ 对应el.dataset.apiKey -
data-2024-start→ ✅ 但只能用el.dataset["2024Start"]访问（点号语法不支持数字开头） -
data-userId、data_user_id、data-UID→ ❌ 浏览器直接忽略，dataset和getAttribute()都拿不到
读取 data 属性时用 dataset 还是 getAttribute
优先用 getAttribute('data-xxx')，不是因为 dataset 不好，而是它太“挑”——对命名不规范静默失败，且所有值都是字符串，不自动类型转换。
-
el.dataset.userId在data-user-id="123"时返回"123"，但data-1st-load="true"就得写el.dataset["1stLoad"]，稍一疏忽就undefined -
el.getAttribute('data-user-id')直接返回原始字符串，不管命名是否含数字、大小写或连字符，只要 HTML 里写了，它就敢读 - 存 JSON 字符串（如
data-initial-state='{"count":42}'）必须用getAttribute+JSON.parse()，且要加try/catch - 判断属性是否存在，用
el.hasAttribute('data-disabled')比el.dataset.disabled !== undefined更准确
修改和同步 data 属性必须调用 setAttribute
dataset 是只读代理，赋值如 el.dataset.status = "loading" 看似生效，但不会真正写入 DOM 属性，CSS 选择器（如 [data-status]）不会响应，刷新后也丢失。
- 真正写入：用
el.setAttribute('data-status', 'loading') - 删除属性：用
el.removeAttribute('data-status')，delete el.dataset.status完全无效 - 批量设置多个：别循环
setAttribute，改用Object.entries(data).forEach(([k, v]) => el.setAttribute(`data-${k}`, v)) - 类型转换要手动：存
data-count="42"，读出来是字符串"42"，需Number(el.getAttribute('data-count'))或+el.getAttribute('data-count')
真正容易被忽略的是：data 属性从不“自动记录行为”，也不“代表状态”。它只是个贴在 DOM 上的便签，JS 不主动读、不监听、不发请求，这张便签就永远安静地待在那里——既不会泄露用户信息，也不会帮你做任何事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
