html IndexedDB数据库使用

2026-04-24 13:00:09 1059阅读 0评论

用IndexedDB做本地数据持久化：小而稳的前端数据仓库

在移动端与浏览器端，频繁的网络请求和数据往返让人头大，尤其在弱网或离线场景下，想让数据“先放着、后补上”却不容易。IndexedDB 作为一种轻量级的客户端存储方案，能让你在不依赖同步请求的前提下，稳定地持久化结构化数据，保存搜索记录、任务清单、离线文章等场景都适配。

为什么用IndexedDB而不是localStorage

localStorage 是常见选择，但它更适合存储简单的键值对或小量字符串数据，结构化数据、事务、索引与查询能力不如 IndexedDB。当需要频繁增删改查、按条件筛选或在离线与在线间平滑切换时，IndexedDB 的事务型写法与索引组织能显著降低数据操作的不确定性与耦合度。

实战：搭建你的本地数据仓库

1. 创建数据库与对象存储

const dbName = 'localData';
const dbVersion = 1;

let db;

// 打开数据库
const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(dbName, dbVersion);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      if (!db.objectStoreNames.contains('items')) {
        const store = db.createObjectStore('items', {
          keyPath: 'id',
          autoIncrement: true,
        });
        store.createIndex('nameIndex', 'name', { unique: false });
        store.createIndex('createdIndex', 'created', { unique: false });
      }
      resolve(db);
    };

    request.onsuccess = (e) => {
      db = e.target.result;
      resolve(db);
    };

    request.onerror = (e) => {
      reject(e);
    };
  });
};

// 使用前先打开数据库
openDB().then(() => {
  // 后续操作数据库
}).catch((error) => {
  console.error('数据库打开失败:', error);
});

2. 写入数据

const addItem = (item) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['items'], 'readwrite');
    const store = transaction.objectStore('items');
    const request = store.add(item);
    request.onsuccess = () => resolve(request.result);
    request.onerror = (e) => reject(e);
  });
};

3. 查询与索引

const getItemsByName = (name) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['items'], 'readonly');
    const store = transaction.objectStore('items');
    const index = store.index('nameIndex');
    const request = index.getAll(`^${name}`); // 模糊匹配示例
    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e);
  });
};

4. 更新与删除

const updateItem = (id, updateData) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['items'], 'readwrite');
    const store = transaction.objectStore('items');
    const request = store.put({ ...updateData, id });
    request.onsuccess = () => resolve();
    request.onerror = (e) => reject(e);
  });
};

const deleteItem = (id) => {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['items'], 'readwrite');
    const store = transaction.objectStore('items');
    const request = store.delete(id);
    request.onsuccess = () => resolve();
    request.onerror = (e) => reject(e);
  });
};