data-属性仅存初始状态快照，不能持久化或自动更新UI；需JS管理真实状态、同步DOM并校验边界。
data- 属性不是进度存储方案，它只存初始状态快照；真正要驱动步骤条前进、回退、持久化或跨刷新保留，得靠 JS 管理状态 + 同步更新 DOM 属性。
data-* 适合存什么：步骤条的静态元数据
比如步骤总数、当前激活步序号、各步语义标识——这些在页面加载时就确定、后续不频繁变更的“描述性信息”。data-step-count="5、data-current-step="2"、data-step-id="payment" 都是合理用法。
注意：data-current-step 的值只是初始值，JS 修改它不会自动触发 UI 更新，必须手动同步 class 或样式；它也不参与逻辑判断（比如“是否已完成？”不能只看 data-current-step="5"，还得结合总步数）。
- 属性名必须全小写+连字符：
data-currentStep或data_current_step会被浏览器忽略 - 所有值都是字符串：
data-current-step="3"读出来是"3"，不是数字 3 - 别用它存布尔开关：
data-is-active="true"是字符串"true"，不是 JS 的true
为什么不能用 dataset 持续管理步骤状态
element.dataset 是只读代理，改它（如 el.dataset.currentStep = "4"）不会触发 DOM 属性更新，DevTools 里也看不到变化。真正要让 CSS 或其他 JS 脚本感知到变更，必须用 el.setAttribute('data-current-step', '4')。
立即学习“前端免费学习笔记（深入）”；
更关键的是：页面刷新后，data- 属性只会恢复 HTML 中写的初始值，JS 运行时改过的值全部丢失。如果你需要用户离开再回来仍停留在第 3 步，data- 做不到。
- 持久化请用
localStorage.setItem('stepIndex', '3') - 组件内状态建议用 JS 变量或响应式框架的 reactive state
-
data-仅作“桥接”：把 JS 状态映射为可被 CSS 选择器读取的 DOM 标记
怎么配合 CSS 实现步骤条视觉反馈
用 data-status 控制样式最干净，比如 <li data-status="done">、<li data-status="active">、<li data-status="pending">。CSS 直接写：
[data-status="done"]::before { content: "✅"; }
[data-status="active"] { font-weight: bold; }
[data-status="pending"] { opacity: 0.5; }
连接线可用相邻兄弟选择器实现：li[data-status="done"] + li::before 画实线，li[data-status="pending"]::before 画虚线。这样 JS 只需切换 data-status 值，样式自动响应。
- 避免用
data-done="1"这类模糊命名，枚举值越明确，CSS 和 JS 维护成本越低 - 不要依赖
data-index="3"做状态判断——索引可能变，但data-status语义稳定 - 如果步骤项是动态生成的，确保每次渲染都正确设置
data-status，否则 CSS 规则失效
真正需要 JS 干的三件事
步骤条不是纯静态展示，JS 必须承担状态管理、DOM 同步和边界控制。
- 维护一个真实状态变量：
let currentStep = 2，而不是反复读dataset.currentStep - 每次切换前校验越界：
if (nextStep > stepCount || nextStep - 更新 DOM 时，先设
setAttribute，再触发事件或动画，避免样式错帧
容易被忽略的是：步骤条常嵌在表单里，用户可能跳过某步或反复修改，data- 属性本身不带校验能力，所有业务规则（比如“支付步必须在地址步之后”）必须在 JS 层显式实现。
