IndexedDB 原生 API 事件驱动、冗长易错，Promise 封装后支持 async/await，提升可读性与维护性；核心封装 open、add、get、delete 方法，并增强批量操作、游标遍历、事务控制、错误处理及类型安全。
IndexedDB 原生 API 是基于事件的（如 onsuccess、onerror），写起来冗长且容易出错。用 Promise 封装后，能直接配合 async/await 使用，大幅提升可读性和维护性。
封装核心数据库操作：open、add、get、delete
先创建一个轻量级封装类，把打开数据库、增删查改统一转为 Promise：
-
open：返回
Promise<idbdatabase></idbdatabase>，自动处理版本升级和 objectStore 创建 - add：向指定 objectStore 插入数据，支持单条或数组，失败时 reject
- get：根据 key 或 IDBKeyRange 查询单条或多条记录
- delete：按 key 删除，也支持范围删除
示例关键逻辑：
class IDB {
constructor(name, version = 1) {
this.name = name;
this.version = version;
}
<p>open() {
return new Promise((resolve, reject) => {
const req = indexedDB.open(this.name, this.version);
req.onerror = () => reject(req.error);
req.onsuccess = () => resolve(req.result);
req.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
});
}</p><p>add(storeName, value) {
return this.open().then(db => {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const req = store.add(value);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
});
}</p><p>get(storeName, key) {
return this.open().then(db => {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, 'readonly');
const store = tx.objectStore(storeName);
const req = store.get(key);
req.onsuccess = () => resolve(req.result);
req.onerror = () => reject(req.error);
});
});
}</p><p>delete(storeName, key) {
return this.open().then(db => {
return new Promise((resolve, reject) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const req = store.delete(key);
req.onsuccess = () => resolve();
req.onerror = () => reject(req.error);
});
});
}
}支持批量操作与游标遍历
原生 IndexedDB 的批量写入（如 put 多条）和游标遍历（openCursor）很难直接 Promise 化。封装时可提供：
立即学习“Java免费学习笔记（深入）”；
-
addAll：批量插入，所有项成功才 resolve，任一失败则 reject（可用
Promise.all实现） -
getAll：兼容性更好的全量读取（内部用游标或
getAllAPI，优先检测浏览器支持） - iterate：返回 Promise 数组，或用 async generator（需手动实现）遍历每条记录
注意：getAll 在较新浏览器中已原生支持，但 Safari 直到 iOS 16.4+ 才稳定支持，降级方案要用游标手动收集。
错误处理与事务控制显式化
Promise 封装后容易忽略事务生命周期。建议：
- 每个方法默认开启独立事务，避免跨调用共享事务导致状态混乱
- 暴露 transaction 方法，允许用户手动控制多步操作的事务边界（例如“先查再改”必须同事务）
- 错误统一包装成
IDBError类型，附带storeName、operation等上下文，便于调试
例如手动事务写法：
async function transferBalance(db, fromId, toId, amount) {
const tx = await db.transaction(['accounts'], 'readwrite');
const store = tx.objectStore('accounts');
<p>const from = await db.get('accounts', fromId);
const to = await db.get('accounts', toId);</p><p>if (from.balance < amount) throw new Error('Insufficient balance');</p><p>await db.put('accounts', { ...from, balance: from.balance - amount });
await db.put('accounts', { ...to, balance: to.balance + amount });</p><p>return tx.complete; // 确保等待事务结束
}实用增强：键值自增、索引查询、类型安全
进一步提升实用性：
- 若 objectStore 启用了
autoIncrement: true，add 返回的 key 可直接用于后续关联操作 - 封装 getByIndex 方法，自动检测索引是否存在，不存在时提示而非静默失败
- TypeScript 用户可为每个 store 定义泛型接口（如
IDB<User>），让get返回明确类型 - 对 value 做基础序列化检查（如
JSON.stringify是否抛错），提前拦截不可存对象（函数、undefined 等）
不复杂但容易忽略。
