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 不一致。

哪些状态必须手动持久化才能续上

只存关键元数据，别存整份数据：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 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 监听就失效

真实场景里最容易被忽略的，是验证逻辑和状态迁移的分离——next 按钮点击后，必须先校验再改索引，而不是先改索引再校验。一旦顺序错了，用户就可能看到空白页或跳过必填项。