JavaScript 中 Ajax 怎么在离线表单提交中配合本地缓存实现有网自动重发-js教程-PHP中文网

离线表单提交通过本地存储暂存数据并网络恢复后重发。核心步骤：拦截提交、序列化存localstorage、监听online事件、逐条发送并清理成功项。

javascript 中 ajax 怎么在离线表单提交中配合本地缓存实现有网自动重发

当用户在离线状态下提交表单时，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 只反映系统级联网状态，不保证服务器可达，因此重发时需加错误处理和重试控制：

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

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