断网时表单不丢数据的关键是在输入过程中自动快照，利用 localstorage 防抖存草稿、按路径+id 命名键、跳过敏感字段；加载时自动恢复内容并提示；提交前健康检查判离线，拦截后禁用按钮并提示；网络恢复后轮询+健康检查双保险重发，失败超3次转 indexeddb 持久化。
断网时表单不丢数据，关键不是等用户点提交才存，而是在输入过程中就自动快照。核心是用浏览器本地存储机制配合合理的事件监听与容错设计。
用 localStorage 实时存草稿
监听表单的 input、change 和 blur 事件，但别只靠 input——中文输入法下它会在选词完成前频繁触发，容易存脏数据。加个 setTimeout 防抖（比如 300ms），确保值稳定后再保存。
- 键名按页面路径 + 表单 ID 拼接，例如：
localStorage.setItem(`${location.pathname}_${form.id}`, JSON.stringify(data))，避免多个表单互相覆盖 - 序列化前用
JSON.stringify()，还原时用try...catch包住JSON.parse()，防止解析失败导致脚本中断 - 敏感字段（如密码、身份证号）跳过存储；大表单或含文件字段的，优先考虑 indexedDB
页面加载时自动恢复内容
DOM 加载完成后立即读取缓存，把字段值填回对应控件。注意只恢复存在且非空的值，避免覆盖默认提示文字或 placeholder。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 遍历表单所有可填写字段（
input、textarea、select），按 name 属性匹配缓存对象的 key - 对
checkbox和radio，需额外判断 checked 状态，不能只设 value - 恢复后可加一个轻量提示：“已从本地恢复上次未提交的内容”
离线状态下拦截提交并友好提示
用户点击提交时，不能让请求发出去再失败。仅用 navigator.onLine 不可靠——它可能显示“在线”，实际连着假 WiFi 或代理不通。更稳妥的做法是提交前发起一次轻量健康检查：
- 用
fetch('/health', { method: 'HEAD', cache: 'no-store' })测试服务端可达性，超时或非 2xx 响应即判定为离线 - 拦截
submit事件后，禁用按钮（button.disabled = true+ CSSpointer-events: none），防止重复点击 - 弹出提示框，展示当前已缓存的数据摘要，并提供「稍后重试」按钮，点击后重新走提交逻辑
联网后自动重发未成功表单
用户网络恢复，不代表服务端立刻就绪。单纯监听 online 事件容易误判。建议采用轮询+健康检查双保险：
- 每 3 秒执行一次
fetch('/health')，连续两次返回 204 才认为环境可用 - 重发使用
fetch并显式设置cache: 'no-store'，绕过 Service Worker 或浏览器缓存干扰 - 每条待发记录带时间戳和重试次数，失败超 3 次则转入 indexedDB 持久化，防止用户关闭标签页后丢失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
