断网时表单数据通过 localStorage 按路径+表单ID存快照，防抖监听输入；提交前用健康检查拦截离线请求并提示；联网后轮询验证再重发，失败超3次转存indexedDB；敏感数据禁存localStorage，大表单优先用indexedDB。
表单数据怎么在断网时自动存本地
浏览器关掉网络后，用户填了一半的表单不能直接丢。核心是用 localStorage 或 sessionStorage 在每次输入变化时存一份快照，不是等提交才存。
- 监听
input、change、blur事件，但别只靠input——中文输入法下它会在选词完成前频繁触发，导致存脏数据；加个setTimeout防抖更稳 - 键名别硬编码成
"form_data"，按页面 URL + 表单id拼，比如localStorage.setItem(`${location.pathname}_${form.id}`, JSON.stringify(data)) - 注意
localStorage存不了函数、DOM 节点、undefined，序列化前用JSON.stringify过一遍，还原时用try...catch包住JSON.parse，避免解析失败卡死
离线状态下怎么阻止表单提交并提示用户
用户点提交按钮时，如果网络不通，不能让请求发出去再失败，得当场拦截。
- 用
navigator.onLine判断只是基础——它只反映浏览器是否认为联网，实际可能连着假 WiFi 或代理挂了；更靠谱的是在提交前发一个轻量fetch('/health')（服务端返回 204），超时或失败就当离线 - 拦截
submit事件后，别只弹alert，把当前缓存的数据展示出来，加个「稍后重试」按钮，点击后重新触发提交逻辑 - 禁用提交按钮时，记得同时设置
button.disabled = true和 CSS 的pointer-events: none，否则移动端可能还能点透
重新联网后如何自动重发未提交的表单
用户开网瞬间不等于能立刻发请求，得等网络真正可用且服务端就绪。
- 监听
online事件不够，它可能在 DNS 解析失败时就触发；建议用setInterval每 3 秒跑一次健康检查，连续两次成功再启动重发队列 - 重发要用
fetch并显式设cache: 'no-store'，防止 Service Worker 或浏览器缓存返回旧响应 - 每条待发记录要带时间戳和重试次数，超过 3 次失败就存进
indexedDB，不然关掉标签页就丢了
localStorage 存大量表单数据会出什么问题
5MB 看似够用，但表单字段多、富文本内容长、用户反复修改时，很容易撑爆或拖慢主线程。
立即学习“前端免费学习笔记（深入）”；
-
localStorage是同步 API，大对象setItem会阻塞渲染，尤其在低端安卓机上明显卡顿；换成indexedDB存原始数据，只用localStorage存个「有未提交数据」的开关标记 - 没清理机制的话，用户换设备、清缓存、或者表单结构改了，旧数据会一直占着位置还无法还原；加个版本号字段，加载时比对
schema_version，不匹配就丢弃 - 敏感字段（如身份证、银行卡）绝不能进
localStorage，哪怕离线也要走加密后存indexedDB，密钥存在内存里，页面卸载就清空
离线功能最麻烦的不是存和取，而是状态同步的时机判断——什么时候算“真离线”，什么时候算“可重发”，这些边界条件没压住，用户就会觉得数据莫名其妙消失或重复提交。
