好的阿杰，我帮你整理一份 前端数据库 IndexedDB 详解：构建强大的离线 Web 应用指南，包括概念、使用方法、API 示例和实用技巧。

🌐 IndexedDB 详解：构建强大的离线 Web 应用

一、概述

  • IndexedDB 是浏览器提供的 本地 NoSQL 数据库，用于存储大量结构化数据。
  • 特点：
    1. 支持离线存储和持久化
    2. 支持事务，保证数据一致性
    3. 异步操作，避免阻塞 UI
    4. 可存储对象、数组、Blob 等复杂数据
  • 应用场景：
    • 离线 Web 应用（PWA）
    • 大量本地数据缓存
    • 前端数据分析和同步

二、IndexedDB 核心概念

概念说明
数据库（Database）顶层存储容器，每个数据库有名称和版本号
对象仓库（Object Store）数据表，存储对象（键值对）
索引（Index）类似 SQL 的索引，提高查询效率
事务（Transaction）原子操作单元，支持 readonly 和 readwrite
键（Key）唯一标识对象的属性，可自动生成

三、创建和打开数据库

const request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 创建对象仓库
  const store = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
  // 创建索引
  store.createIndex("name", "name", { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;
  console.log("数据库打开成功");
};

request.onerror = function(event) {
  console.error("数据库打开失败:", event.target.errorCode);
};

四、增删改查操作

1. 添加数据

const transaction = db.transaction("users", "readwrite");
const store = transaction.objectStore("users");
store.add({ name: "Alice", age: 25 });

2. 查询数据

const request = store.get(1); // 根据主键查询
request.onsuccess = function(event) {
  console.log(request.result);
};

3. 更新数据

const request = store.put({ id: 1, name: "Alice", age: 26 });

4. 删除数据

store.delete(1); // 删除主键为 1 的数据

5. 遍历数据

store.openCursor().onsuccess = function(event) {
  const cursor = event.target.result;
  if(cursor) {
    console.log(cursor.value);
    cursor.continue();
  }
};

五、事务与错误处理

  • 事务类型：
    • "readonly"：只读事务
    • "readwrite"：可读写事务
  • 事务自动提交：事务完成后自动提交或回滚
  • 错误处理：
transaction.onerror = function(event) {
  console.error("事务失败:", event.target.error);
};

六、离线应用实践

  1. 缓存用户操作数据，待网络恢复再同步到服务器
  2. 配合 Service Worker，实现 PWA 离线访问
  3. 存储大文件，如图片、音频、视频 Blob 数据
// 存储图片
const imgTransaction = db.transaction("images", "readwrite");
const imgStore = imgTransaction.objectStore("images");
imgStore.add({ id: 1, data: blob });

七、实用技巧

  1. 封装 IndexedDB 操作，使用 Promise 提升可读性
  2. 利用索引快速查询，避免全表扫描
  3. 版本管理：升级数据库时，使用 onupgradeneeded 做数据迁移
  4. 性能优化：批量操作建议在一个事务中完成

💡 总结

  • IndexedDB 是前端强大的本地数据库，可实现离线存储和高性能数据管理
  • 核心操作包括 创建数据库、对象仓库、索引、增删改查
  • 配合 事务、索引和 Service Worker，可打造完整的离线 Web 应用