离线表单提交通过本地存储暂存数据并网络恢复后重发。核心步骤：拦截提交、序列化存localStorage、监听online事件、逐条发送并清理成功项。
当用户在离线状态下提交表单时，Ajax 本身无法发出请求，但可以通过结合浏览器本地存储（如 localStorage 或 IndexedDB）暂存数据，并在网络恢复后自动重发。核心思路是：拦截提交 → 序列化并存入本地 → 监听网络状态 → 检查缓存并逐条重试 → 成功后清理。
捕获表单提交并降级到本地缓存
阻止默认提交行为，序列化表单数据，生成唯一标识（如时间戳 + 随机数），再存入 localStorage：
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(form);
const payload = Object.fromEntries(data);
const id = Date.now() + '-' + Math.random().toString(36).substr(2, 9);
const pendingItem = {
id,
url: '/api/submit',
method: 'POST',
payload,
timestamp: Date.now()
};
// 存入 localStorage（需字符串化）
const list = JSON.parse(localStorage.getItem('pendingSubmits') || '[]');
list.push(pendingItem);
localStorage.setItem('pendingSubmits', JSON.stringify(list));
// 给用户反馈
alert('已离线保存，网络恢复后将自动提交');
});
监听网络状态并触发重发机制
使用 navigator.onLine 初步判断，再配合 online / offline 事件监听网络切换。注意：onLine 只反映系统级联网状态，不保证服务器可达，因此重发时需加错误处理和重试控制：
window.addEventListener('online', () => {
setTimeout(sendPendingRequests, 1000); // 延迟确保网络稳定
});
async function sendPendingRequests() {
const list = JSON.parse(localStorage.getItem('pendingSubmits') || '[]');
if (list.length === 0) return;
for (let i = 0; i < list.length; i++) {
const item = list[i];
try {
const res = await fetch(item.url, {
method: item.method,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(item.payload)
});
if (res.ok) {
// 成功则从缓存中移除
list.splice(i, 1);
i--; // 因删除了当前项，索引回退
}
} catch (err) {
console.warn(`提交失败 ${item.id}，稍后重试`, err);
break; // 遇错暂停，避免雪崩；后续可加指数退避
}
}
localStorage.setItem('pendingSubmits', JSON.stringify(list));
}
增强可靠性：用 IndexedDB 替代 localStorage
localStorage 容量小（通常 5–10MB）、阻塞主线程、不支持事务。对多字段、大文本或频繁提交的表单，推荐用 IndexedDB：
立即学习“Java免费学习笔记（深入）”；
- 支持结构化数据、二进制（如文件）、事务安全
- 可用
idb库简化操作（轻量 Promise 封装） - 可添加过期策略（如 7 天未发送则自动丢弃）
- 支持按状态（pending/sent/failed）分类查询，便于后台重试管理
补充体验细节
提升用户感知与系统健壮性：
- 提交按钮禁用 + 加载态提示，防止重复点击
- 页面加载时检查缓存并显示“有 X 条待同步”提示（可点击查看/手动重试）
- 重发失败时记录失败次数，超过阈值（如 3 次）转为人工干预或通知用户
- 服务端需幂等设计（如用客户端生成的 request-id 去重），避免重复提交
不复杂但容易忽略的是网络恢复的“假阳性”——比如 WiFi 已连但网关不通。因此实际项目中建议在 online 触发后，先 fetch('/health') 确认 API 可达，再执行重发逻辑。
