应优先用 data- 属性持久化组件状态，而非 js 变量或 localstorage；表单控件天然支持浏览器自动回填；销毁前需主动同步状态到 dom；禁用 class 模拟状态，确保 dataset 与真实交互一致。
用 data- 属性持久化组件状态
HTML 本身不保存状态，但你可以把当前交互结果（比如折叠状态、选中项、排序方向）直接写进 DOM 节点的 data- 属性里，下次加载时读取它，就能“记住”上次行为。
常见错误是只在 JS 里用变量存状态，页面刷新就丢；或者滥用 localStorage 做全量缓存，反而让局部组件逻辑耦合全局存储。
-
data-is-open="true"比isOpen = true更可靠——它和 DOM 绑定，渲染即存在 - 对可切换的 tab 组件，用
data-active-tab="settings"，比靠 class 名匹配更语义清晰 - 避免写
data-state='{"open":true,"sort":"desc"}'这种 JSON 字符串——解析麻烦、易出错，拆成多个data-更好维护 - 初始化时优先读
data-，再 fallback 到默认值，而不是反着来
用 form 元素天然支持状态回填
表单控件（input、select、textarea、checkbox）在 HTML 层就自带状态记忆能力：用户输入后刷新页面，只要没手动清空或重置，浏览器会自动恢复值。这是最轻量、最兼容的交互记忆方式。
很多人绕开这个机制，自己用 JS 绑定 value 或监听 input 事件再存到变量里，纯属重复造轮子。
- 确保
input有name属性，否则部分浏览器不触发自动回填 - 对动态生成的表单项，插入 DOM 后需调用
input.focus()再input.blur()才能强制触发一次状态同步（尤其在 Safari 中） - 禁用自动填充时加
autocomplete="off"，但别加在form上——它会连带关掉所有子控件的记忆，应只加在具体不需要记忆的字段上
组件销毁前主动同步 DOM 状态
当一个复杂组件被 JS 移除（比如 el.remove() 或 innerHTML = ''），它的 data- 和表单值都会丢失。如果希望下次重建时“接着上次”，就得在移除前把关键状态写回 HTML 或父容器。
典型场景：多步骤配置面板切换、动态加载的卡片列表滚动到视口外后卸载。
- 在组件
destroy()方法里遍历所有可交互子元素，把当前值/状态写入其dataset - 不要依赖
beforeunload——它不保证执行，且无法区分是关闭标签页还是跳转内部路由 - 对使用
DocumentFragment批量插入的组件，记得在插入前先从缓存或父节点读取对应data-值并初始化 - 如果组件嵌套深，建议在根节点统一用
data-component-id标识，方便外部脚本定位和状态快照
避免用 class 名模拟状态导致记忆失效
有人习惯用 class="is-open is-sorted-desc" 表示组件状态，再靠 JS 读 class 判断。这看似简洁，但 class 是样式层概念，容易被 CSS 框架、第三方脚本、甚至开发者自己误删或覆盖，导致状态“失忆”。
更糟的是，CSS 的 :has() 或 JS 的 el.classList.contains() 都不能反映真实交互意图——比如用户点了关闭按钮但动画还没结束，class 已删，但视觉上还开着。
- 状态判断一律用
dataset或原生属性（checked、value、selectedIndex） - class 只用于控制样式表现，比如
is-opening（过渡中）、is-closed（终态），但终态 class 必须和data-is-open="false"严格同步 - 用 MutationObserver 监听 class 变化来反推状态？别这么做——性能差、不可靠、调试困难
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
