IndexedDB 使用完全指南

核心特性

1. NoSQL存储：自由存储结构化数据（支持JSON对象）
2. 事务支持：ACID事务保证数据一致性
3. 索引系统：支持多字段索引查询（最大支持256个索引）
4. 异步API：所有操作不阻塞主线程
5. 大容量：Chrome默认允许存储网站数据的60%（最高可达80%硬盘空间）
6. 离线支持：PWA应用的核心存储方案

---

快速入门

生命周期管理

1. 开启数据库：indexedDB.open(name, version)
2. 版本升级：在onupgradeneeded中修改结构
3. 对象仓库：类似SQL的表结构
4. 事务操作：所有数据操作必须通过事务

核心对象关系

Database → ObjectStore → Index
                ↑
Transaction → Cursor

---

完整代码示例

1. 数据库初始化

const DB_NAME = 'userDB';
const STORE_NAME = 'userProfile';
const DB_VERSION = 3; // 每次结构变更递增版本

const dbRequest = indexedDB.open(DB_NAME, DB_VERSION);

dbRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  
  if (!db.objectStoreNames.contains(STORE_NAME)) {
    // 创建对象仓库
    const store = db.createObjectStore(STORE_NAME, {
      keyPath: 'userId',
      autoIncrement: false
    });
    
    // 创建复合索引
    store.createIndex('age_gender', ['age', 'gender'], { unique: false });
    // 唯一约束索引
    store.createIndex('email', 'email', { unique: true });
  }
  
  // 版本2新增登录时间索引
  if (event.oldVersion < 2) {
    const store = event.target.transaction.objectStore(STORE_NAME);
    store.createIndex('lastLogin', 'loginTimestamp', { unique: false });
  }
};

dbRequest.onsuccess = (event) => {
  const db = event.target.result;
  db.onversionchange = () => db.close(); // 安全关闭监听
};

2. 数据操作

事务封装方法

async function executeTransaction(db, storeNames, mode, operation) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(storeNames, mode);
    transaction.oncomplete = () => resolve();
    transaction.onerror = (e) => reject(e.target.error);
    
    operation(transaction);
  });
}

增删改查实现

// 批量写入
async function bulkWrite(db, items) {
  await executeTransaction(db, [STORE_NAME], 'readwrite', (tx) => {
    const store = tx.objectStore(STORE_NAME);
    items.forEach(item => store.put(item));
  });
}

// 条件更新
async function conditionalUpdate(db, userId, updates) {
  const user = await getRecord(db, userId);
  if (user.loginCount > 5) {
    await updateRecord(db, { ...user, ...updates });
  }
}

// 分页查询
async function paginatedQuery(db, indexName, range, pageSize, pageNumber) {
  return new Promise((resolve) => {
    const transaction = db.transaction([STORE_NAME]);
    const store = transaction.objectStore(STORE_NAME);
    const index = store.index(indexName);
    
    const results = [];
    let count = 0;
    let advanced = false;
    
    index.openCursor(range).onsuccess = (event) => {
      const cursor = event.target.result;
      if (!cursor) return resolve(results);
      
      if (!advanced && pageNumber > 1) {
        cursor.advance((pageNumber - 1) * pageSize);
        advanced = true;
        return;
      }
      
      results.push(cursor.value);
      if (++count >= pageSize) return resolve(results);
      cursor.continue();
    };
  });
}

---

架构原理

存储结构

层级	说明	限制
Database	数据库容器	同源下可创建多个
ObjectStore	数据存储实体	每个DB最多300个
Index	索引加速查询	每个Store最多256个索引
Cursor	数据遍历迭代器	自动管理内存

事务模型

• 作用域：预定义ObjectStore集合
• 模式：readonly（默认） / readwrite / versionchange
• 自动提交：约1秒无操作自动提交
• 错误处理：事务中任一操作失败则整体回滚

---

浏览器兼容指南

支持矩阵

浏览器	支持版本	存储配额策略
Chrome	24+	按磁盘空间比例
Firefox	16+	独立于SQLite存储
Safari	8+	严格7天LRU清理策略
Edge	12+	继承IE10+实现

容量估算

navigator.storage.estimate().then(estimate => {
  console.log(`可用空间：${estimate.quota / 1024 ** 2} MB`);
  console.log(`已用空间：${estimate.usage / 1024 ** 2} MB`);
});

---

最佳实践场景

推荐场景

1. 离线优先应用（如PWA）
2. 客户端分析数据存储
3. 富文本自动保存
4. 媒体资源元数据管理
5. 实时协作应用状态同步

性能对比

操作类型	localStorage	IndexedDB
10KB写入	0.2ms	2ms
10MB写入	阻塞	120ms
条件查询	不可	8ms
万级数据遍历	阻塞	45ms

---

专家级技巧

高级优化

1. 批量写入：合并操作减少事务开销
2. 游标复用：使用advance()实现快速分页
3. 内存管理：合理设置keyRange避免全表扫描
4. 压缩策略：存储前使用JSON.stringify压缩
5. Worker集成：将复杂操作移入Web Worker

调试技巧

// 查看所有数据库
indexedDB.databases().then(dbs => 
  console.log('现有数据库:', dbs)
);

// 性能监测
const start = performance.now();
transaction.oncomplete = () => 
  console.log(`事务耗时：${performance.now() - start}ms`);

---

资源推荐

工具库

1. idb：Promise封装库（2KB）
2. Dexie.js：类ORM高级封装
3. localForage：自动降级存储方案

调试工具

1. Chrome DevTools IndexedDB面板
2. Firedox Storage Inspector
3. Safari Web Inspector

扩展阅读

• W3C规范文档
• IndexedDB设计模式

---

通过本指南，您已掌握IndexedDB从基础到高级的完整知识体系。建议在实际项目中结合Service Worker和Cache API构建完整的离线解决方案。