离线缓存实现方案

最新推荐文章于 2025-05-27 11:18:12 发布

原创最新推荐文章于 2025-05-27 11:18:12 发布 · 726 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#缓存 #前端 #性能优化 #javascript

“离线缓存保障业务连续性”，可以理解为：在网络较差甚至无网的情况下，系统依然可以运行核心功能、保存数据，等网络恢复后再同步。这个功能在实际开发中很实用，尤其是针对销售、巡检、物流等场景。下面我按逻辑梳理一下，离线缓存功能的一般实现方案：

🧱 一、主要目标

弱网或无网时，用户依然能操作业务流程。
用户在离线期间填写或操作的数据本地保存。
网络恢复后，自动同步到服务端，保持数据一致性。

🔧 二、核心技术实现

1. 数据持久化（本地存储）

根据项目技术栈选择本地存储方式：

技术栈	本地存储方案
浏览器网页（Vue/React等）	`IndexedDB`（推荐），`localStorage`（简单但有大小限制）
小程序	微信小程序的 `wx.setStorageSync` / `wx.getStorageSync`
App	SQLite、本地文件系统、Storage 等

IndexedDB 优势：支持结构化数据、容量大、异步。

2. 网络状态监控

监测设备的联网状态，来决定是否走离线逻辑：

window.addEventListener('online', () => { /* 自动同步 */ });
window.addEventListener('offline', () => { /* 提示用户已断网 */ });

或者调用接口时判断：

if (navigator.onLine) {
  // 在线逻辑
} else {
  // 离线缓存
}

3. 离线请求队列（任务队列）

核心功能：把用户的操作（如表单提交）封装成任务对象，缓存到本地。

const queue = JSON.parse(localStorage.getItem('offlineQueue') || '[]');
queue.push({
  url: '/api/saveForm',
  method: 'POST',
  payload: { name: '张三', phone: '123456' },
  timestamp: Date.now(),
});
localStorage.setItem('offlineQueue', JSON.stringify(queue));

数据结构尽量设计成“幂等”的，避免重复提交产生副作用。

4. 网络恢复后自动同步

当监听到网络恢复（或用户手动触发“重试”），就读取缓存队列，逐条重发：

async function syncOfflineQueue() {
  const queue = JSON.parse(localStorage.getItem('offlineQueue') || '[]');
  for (let i = 0; i < queue.length; i++) {
    const task = queue[i];
    try {
      await axios({ url: task.url, method: task.method, data: task.payload });
      // 成功则移除
      queue.splice(i, 1);
      i--;
    } catch (e) {
      console.warn('同步失败，稍后重试');
    }
  }
  localStorage.setItem('offlineQueue', JSON.stringify(queue));
}