表单提交页面卡死源于原生同步提交导致JS中断；正确做法是event.preventDefault()拦截后用fetch异步发送，并结合localStorage/indexedDB离线缓存与Service Worker重试机制。
表单提交时页面卡死，是同步请求在作怪
浏览器原生 submit 行为默认就是同步的：表单提交后，页面会立刻卸载、跳转或刷新，所有 JS 执行中断。所谓“同步离线提交”，本质是个伪命题——你没法在页面还活着的时候，用原生表单做真正的同步离线操作。
常见错误现象：fetch() 或 XMLHttpRequest 被封装进 onsubmit 但没调用 event.preventDefault()，结果表单照常提交，JS 请求发了一半就被中断；或者用了 async: false（jQuery 旧写法），但现代浏览器已禁用该模式，直接抛出 InvalidAccessError。
- 真正能“离线”+“同步感”的路径只有一条：拦截原生提交 → 改为 JS 异步发送 → 手动控制反馈
- 必须加
event.preventDefault()，否则一切 JS 逻辑都白写 - 不要试图用
form.submit()触发同步提交再等返回——它不等，也不给你回调
用 fetch() 模拟同步体验，但得处理好离线兜底
用户感知上的“同步”，其实是 UI 响应及时 + 错误反馈明确。而离线能力依赖的是 Service Worker 缓存或 IndexedDB 暂存，不是请求本身同步。
使用场景：表单提交后需立即禁用按钮、显示加载态，且网络断开时数据不能丢。
立即学习“前端免费学习笔记（深入）”；
- 先检查
navigator.onLine，但它不准——仅表示系统级联网状态，不反映真实服务器可达性 - 真正可靠的离线判断是
fetch()抛出TypeError: Failed to fetch（注意不是 HTTP 状态码） - 失败时把表单数据序列化后存进
localStorage或indexedDB，别用sessionStorage（关闭标签页就没了） -
fetch()默认不带 cookie，如需登录态，记得加credentials: 'include'
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
try {
const res = await fetch('/api/submit', {
method: 'POST',
body: formData,
credentials: 'include'
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
location.href = '/success';
} catch (err) {
if (err.name === 'TypeError' && err.message.includes('fetch')) {
localStorage.setItem('pendingForm', JSON.stringify(Object.fromEntries(formData)));
alert('已离线保存，网络恢复后将自动重发');
}
}
});
FormData 和 URLSearchParams 别混用，尤其涉及文件上传
表单含 <input type="file"> 时，只能用 FormData；纯文本字段两者都行，但行为有关键差异。
-
FormData支持二进制文件，URLSearchParams只能处理字符串，传文件会变成[object File] -
FormData的键名保留原始 name 属性，URLSearchParams对中文或特殊字符会自动编码，后端解析可能不一致 - 若用
fetch()发FormData，不要手动设Content-Type头——浏览器会自动生成带 boundary 的 multipart 类型 - 想兼容 GET 查询参数拼接？用
new URLSearchParams(formData).toString()，但仅限无文件场景
Service Worker 不会自动重发失败请求，得自己写重试逻辑
很多人以为注册了 SW 就能“自动离线同步”，其实 SW 只是拦截和缓存工具，没有内置队列或重试机制。
- SW 里无法访问
localStorage或DOM，持久化待发数据得用indexedDB（主页面和 SW 都能访问） - 重发时机得自己定义：比如监听
online事件，或定时轮询navigator.onLine+ 主动发起请求 - 避免无限重试：记录失败次数，超过 3 次后弹窗提示用户手动重试，防止阻塞 SW 线程
- 重发成功后，务必从
indexedDB中删除对应记录，否则下次启动又发一遍
最易被忽略的一点：表单提交后页面跳转，意味着当前 JS 上下文销毁，所有内存中变量（包括未 resolve 的 Promise）全部丢失。所谓“同步离线”，从来不是靠阻塞主线程实现的，而是靠状态持久化 + 用户可见的反馈闭环。
