data-*属性不是缓存方案，仅存静态字符串且不持久化；真要临时缓存应使用sessionstorage或localstorage，前者绑定标签页生命周期，后者跨刷新保留。
HTML data-* 属性不是前端缓存方案，它不提供任何缓存能力——页面刷新后值还在，只是因为 HTML 源码里写着；JS 修改它不会持久化，关掉标签页或刷新就回到初始状态。真要缓存临时数据，请用 sessionStorage 或 localStorage。
为什么 data-* 不能当缓存用
它只是 DOM 节点上的字符串属性，浏览器不做生命周期管理、不触发变更通知、不参与 diff、也不自动同步到 JS 变量：
-
data-user-id="123"写在 HTML 里，刷新后还在，但这是静态 HTML 的“残留”，不是缓存机制在起作用 -
el.dataset.userId = "456"看似改了，但el.getAttribute("data-user-id")可能还是"123"（没调setAttribute就不同步） - 所有值都是字符串：
data-count="42"读出来是"42"，不是数字；data-active="false"是字符串"false"，Boolean("false") === true - 存对象或数组必须手动
JSON.stringify()+JSON.parse()，且遇到undefined、Date、function会静默丢弃
sessionStorage 才是真正的会话级临时缓存
它专为“当前标签页生命周期”设计，关掉标签页自动清空，适合存登录态、表单草稿、筛选条件等：
- 写入必须用
sessionStorage.setItem("key", JSON.stringify(obj))，传对象会变成"[object Object]" - 读取后必须
JSON.parse(sessionStorage.getItem("key") || "{}")，且要try/catch处理解析失败 - 键名只推荐字母、数字、下划线；含空格或斜杠可能静默失败
- Safari 无痕模式下
setItem()可能完全不报错也不生效，务必加try/catch并验证写入结果 - 跨子域名不共享：
app.example.com存的，api.example.com读不到
什么时候可以搭配 data-* 一起用
它适合做“初始化载入”或“DOM 绑定钩子”，配合真正缓存方案使用：
- 服务端渲染时把初始配置塞进
data-config，JS 启动时读一次并写入sessionStorage，后续全走缓存 - 按钮点击后把当前状态存进
sessionStorage，再用dataset控制 UI 显示（如data-loading="true"配合 CSS 动画） - 用
data-api-endpoint声明请求地址，但 token、用户信息这类敏感字段绝不能放这里，得从sessionStorage或内存变量里取 - 避免用
dataset直接读写高频状态（比如滚动位置、计时器），DOM 属性读写比 JS 变量慢一个数量级
真正容易被忽略的是：很多人把 data-* 当成“轻量 localStorage”，其实它连“临时”都算不上——它不跨 JS 执行周期，不防篡改，不校验类型，也不保证更新可见。缓存逻辑该在哪写，就得在哪写清楚；别指望靠一个属性名蒙混过关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
