页面刷新时表单数据重置是浏览器默认行为，防丢需在输入时存入sessionstorage、加载时立即回填dom节点；form.reset()无效因其仅还原html初始值；提交或重置后须手动清除缓存。
页面刷新时表单数据重置不是 bug，是浏览器默认行为——只要没主动干预，所有 JS 设置的 input.value、select.value、checkbox.checked 都会丢。防丢的关键动作只有两个：输入时存、加载时取，且必须在 DOM 就绪前完成回填。
为什么 form.reset() 不是解决方案
form.reset() 只还原 HTML 中写死的初始值（比如 <input value="default">），对 JS 动态设置的值无效；动态插入的 <option></option> 在 reset 后直接消失；<textarea></textarea> 的初始内容必须写在标签体内才被识别。它解决不了“用户刚输一半刷新后想继续”这个真实问题。
用 sessionStorage 实现即输即存
比 localStorage 更适合表单防丢：关掉标签页自动清空，不跨会话残留，无隐私风险。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听
input事件（非change）实时存值：sessionStorage.setItem('form-login-username', e.target.value) - 对
checkbox和radio存布尔值：sessionStorage.setItem('agree', String(cb.checked)) - 多选
<select multiple></select>需遍历：Array.from(select.selectedOptions).map(o => o.value) - 避免 debounce——普通表单要确保每次 keystroke 都落盘，否则关页前最后几个字就丢了
页面加载时立即回填，别等 DOMContentLoaded
框架（React/Vue）或复杂 DOM 结构下，如果等到 DOMContentLoaded 再读取 sessionStorage 并赋值，可能因 hydration 或渲染时机导致值被覆盖或丢失。
- 最佳时机：在对应
<input id="username">节点创建后立刻执行回填逻辑 - 回填前先判空：
if (sessionStorage.getItem('form-login-username')) { el.value = ... } -
checkbox必须设el.checked = true/false，不能只改value - 动态生成字段（如点击“添加联系人”新增的 input）需在节点插入后同步调用存/取逻辑，否则
sessionStorage里没对应 key
提交成功后必须手动清除缓存
不清理会导致用户下次打开页面仍显示旧数据，尤其在编辑场景下极易引发误操作。
- 在 fetch 成功回调里逐个
sessionStorage.removeItem('key') - 或统一用
sessionStorage.clear()（前提是该页只存这一个表单） - 用户点击“重置表单”按钮时，也要同步清掉对应键值
- 注意：路由跳转（如 SPA 中从 /edit → /list）不会触发
beforeunload，得监听路由离开事件额外保存
真正难的不是写几行存取代码，而是字段命名一致性、动态表单项生命周期同步、以及框架响应式更新与 DOM 操作的时序冲突——这些地方一漏，数据就悄无声息地丢了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
