form.reset() 无法恢复 js 动态设置的值，因其仅读取 html 中初始的 value、checked、selected 属性，忽略运行时通过 js 修改的状态；动态插入的表单元素和 textarea 标签体外内容亦不被 reset() 识别。
form.reset() 为什么不能恢复 JS 动态设置的值
因为 form.reset() 只读取 HTML 中写死的 value、checked、selected 属性，完全无视 JS 运行时通过 input.value = 'xxx' 或 select.selectedIndex = 2 设置的状态。更麻烦的是：<option></option> 是 JS 动态插入的，reset() 根本不认它；<textarea></textarea> 的初始内容必须写在标签体内（<textarea>初始文本</textarea>），否则 reset() 拿不到。
刷新后表单状态丢失的根本原因
不是浏览器“没刷好”，而是内存状态被清空——location.reload() 会销毁所有 JS 变量、事件监听器、滚动位置、临时数据数组。哪怕你用 sessionStorage 存了登录态，表单里刚填的地址、选中的分类、当前页码这些仍全丢。常见现象包括：用户填到一半刷新，回到空白页；“加载更多”翻到第 5 页，刷新后跳回第 1 页；多步骤表单点 ← 返回，步骤 UI 和内部 currentStepIndex 不一致。
哪些状态必须手动持久化才能续上
只存关键元数据，别存整份数据：
-
lastCursor（比如最后一条记录的id或时间戳），用于无限滚动续加载 -
currentPage或currentStepIndex，决定初始化时该展示哪一页/哪一步 -
formValues中用户已填的字段（仅必要字段，如name、email），用sessionStorage.setItem('formState', JSON.stringify(obj))存 - 不要存整个渲染后的 DOM 或大数组到
localStorage—— 序列化慢，且容易和服务器状态脱节
多步骤表单中按钮状态为何总不同步
根本问题在于没有统一的状态源。很多人直接写 previousBtn.disabled = true，但后续步骤切换时忘了同步更新，或 JS 报错导致状态卡住。正确做法是只维护一个 currentStepIndex（从 0 开始），所有按钮状态都由此计算：
previousBtn.disabled = currentStepIndex === 0-
nextBtn.disabled = !validateCurrentStep()（验证通过才允许跳） - 每次跳转后必须调用
history.pushState({ step: currentStepIndex }, '', `?step=${currentStepIndex}`) - 页面加载时先读 URL 参数
step，再初始化currentStepIndex，否则 popstate 监听就失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
