HTML表单输入内容不会自动保存，需用localStorage结合debounce、beforeunload及路由监听等机制实现防丢失，且须适配框架生命周期。
HTML 表单输入内容会自动保存吗？
不会。原生 HTML 没有自动保存机制，input、textarea 等元素在页面刷新或意外关闭后，所有未提交的内容立即丢失。浏览器的「表单恢复」（如 Chrome 在崩溃后提示“恢复此页面”）属于 UA 行为，不可控、不触发事件、不兼容所有场景（比如 SPA 路由跳转、iframe 内嵌、history.pushState 后退），不能当作防丢失方案。
用 localStorage 实现防丢失的关键细节
核心是监听用户输入并及时落盘，但直接绑 input 事件高频写 localStorage 会卡顿，且页面卸载前必须确保最后一次变更已保存。
- 优先用
debounce（例如 800ms 延迟）写入，避免每敲一个字都触发磁盘 I/O - 必须监听
beforeunload，手动触发一次强制保存——因为 debounce 可能还没执行就关页了 - 恢复时不要在 DOM 加载完成（
DOMContentLoaded）后再读取，而应在input元素创建后立刻赋值，否则 React/Vue 等框架可能因 hydration 不一致丢掉值 - 给每个字段加唯一 key，推荐组合：页面路径 + 表单 ID + 字段 name，例如
localStorage.setItem('form-edit-user-username', value)
beforeunload 里能做异步保存吗？
不能。beforeunload 是同步钩子，且浏览器会立即终止所有未完成的异步操作（包括 fetch、setTimeout）。试图在里面发请求保存到服务端，99% 会失败。
- 所有防丢失逻辑必须基于客户端同步存储（
localStorage或sessionStorage） - 如果真要同步到服务端，需另起「心跳式保活」：定时（如 30s）把本地变更
fetch到后端，并在beforeunload中仅标记「待同步」状态 -
sessionStorage更适合单页临时防丢失（关闭标签页即清空），比localStorage少一层跨标签页干扰
React/Vue 项目里容易漏掉的点
框架的响应式更新和 DOM 生命周期会让防丢失逻辑失效，不是加个 useEffect 监听就完事。
立即学习“前端免费学习笔记（深入）”；
- Vue 用
v-model时，input事件可能被拦截，应监听组件暴露的@update:modelValue或使用watch监听响应式变量 - React 中若用受控组件（
value+onChange），保存逻辑必须放在onChange回调内，不能只依赖useEffect监听 state——state 更新可能被 batch，导致 debounce 错过中间值 - SPA 路由切换（如从 /edit 到 /list）时，
beforeunload不触发，得额外监听路由变化，在unmount或leave钩子中主动保存
防丢失真正难的不是存数据，而是判断「什么时候算用户真的要离开」——浏览器关页、F5 刷新、路由跳转、React 组件卸载，每种退出路径都要覆盖，且不能影响正常交互性能。
