如何用IndexedDB实现一个离线优先的Web应用？-js教程-PHP中文网

如何用IndexedDB实现一个离线优先的Web应用？

狼影

发布： 2025-10-07 18:34:01

原创

804人浏览过

离线优先Web应用通过IndexedDB实现本地数据存储与同步。首先初始化数据库并创建对象仓库，如用于存储笔记的notes表；接着封装增删改查操作，所有数据操作均优先在本地完成，例如添加笔记时存入IndexedDB并标记synced: false；读取数据时直接从本地获取，确保无网络时仍可访问；当检测到网络恢复时，自动将未同步的数据通过fetch发送至服务器，并更新每条记录的同步状态；同时在UI中展示“未同步”提示，提升用户体验。核心是将本地数据库作为主数据源，网络仅用于后台同步，从而保证应用在离线环境下的可用性与数据一致性。

如何用indexeddb实现一个离线优先的web应用？

要实现一个离线优先的Web应用，IndexedDB是关键工具之一。它允许你在浏览器中存储大量结构化数据，包括文件和二进制大对象（Blob），支持在无网络环境下正常运行。核心思路是：先从本地数据库读取数据，再在后台同步到服务器。

初始化IndexedDB并创建数据表

应用启动时，需要打开或创建一个IndexedDB数据库，并定义数据仓库（object store）。每个仓库相当于一张表，用于存放特定类型的数据，比如用户笔记、任务列表等。

示例代码：

let db;
const DB_NAME = 'OfflineAppDB';
const VERSION = 1;
const STORE_NAME = 'notes';

function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, VERSION);

    request.onerror = () => reject(request.error);
    
    request.onsuccess = () => {
      db = request.result;
      resolve(db);
    };

    request.onupgradeneeded = (event) => {
      db = event.target.result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
      }
    };
  });
}

登录后复制

实现离线数据的增删改查

封装CRUD操作，让前端代码无需关心当前是否联网。所有操作都先作用于本地IndexedDB。

例如添加一条记录：

function addNote(noteText) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction([STORE_NAME], 'readwrite');
    const store = transaction.objectStore(STORE_NAME);
    const note = { text: noteText, createdAt: Date.now(), synced: false };

    const request = store.add(note);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

登录后复制

读取数据时，直接从本地获取：

function getAllNotes() {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction([STORE_NAME], 'readonly');
    const store = transaction.objectStore(STORE_NAME);
    const request = store.getAll();

    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

登录后复制

网络恢复后自动同步到服务器

监听网络状态变化，在重新联网时将未同步的数据发送到后端。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

可以标记每条记录的 synced 字段，表示是否已同步。

实现同步逻辑：

function syncToServer() {
  if (!navigator.onLine) return;

  getAllNotes().then(notes => {
    const unsynced = notes.filter(n => !n.synced);
    unsynced.forEach(note => {
      fetch('/api/notes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: note.text })
      })
      .then(res => res.json())
      .then(serverNote => {
        // 标记为已同步
        updateSyncStatus(note.id, true);
      })
      .catch(err => console.warn('同步失败，稍后重试', err));
    });
  });
}

// 更新本地记录的同步状态
function updateSyncStatus(id, synced) {
  const transaction = db.transaction([STORE_NAME], 'readwrite');
  const store = transaction.objectStore(STORE_NAME);
  const getRequest = store.get(id);

  getRequest.onsuccess = () => {
    const data = getRequest.result;
    data.synced = synced;
    store.put(data);
  };
}

登录后复制

在页面加载或网络恢复时调用 syncToServer()。