IndexedDB

1 minIntermediate2026/6/14

浏览器端结构化存储数据库

1. IndexedDB 概述

特性	说明
类型	NoSQL 键值对数据库
容量	数百MB到数GB
事务	所有操作必须在事务中
异步	不阻塞主线程

2. 基本操作

// 打开数据库
const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id' });
    store.createIndex('name', 'name', { unique: false });
    store.createIndex('email', 'email', { unique: true });
  }
};

// Promise 封装
function dbOp(db, store, mode, callback) {
  return new Promise((resolve, reject) => {
    const tx = db.transaction(store, mode);
    const req = callback(tx.objectStore(store));
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

// CRUD
await dbOp(db, 'users', 'readwrite', (s) => s.add({ id: 1, name: 'Alice' }));
await dbOp(db, 'users', 'readonly', (s) => s.get(1));
await dbOp(db, 'users', 'readwrite', (s) => s.put({ id: 1, name: 'Bob' }));
await dbOp(db, 'users', 'readwrite', (s) => s.delete(1));

3. 索引与查询

// 索引查询
const index = store.index('email');
index.get('alice@example.com');

// 范围查询
IDBKeyRange.only(25);
IDBKeyRange.lowerBound(18);
IDBKeyRange.upperBound(65);
IDBKeyRange.bound(18, 65);

// 游标遍历
store.openCursor(null, 'next'); // 正序
store.openCursor(null, 'prev'); // 倒序

4. 事务

const tx = db.transaction(['users', 'orders'], 'readwrite');
tx.oncomplete = () => console.log('完成');
tx.onerror = () => console.error('失败');
tx.abort(); // 回滚