浏览器内置数据库 IndexedDB 全面入门：介绍与实战使用教程

什么是 IndexedDB？

IndexedDB（Indexed Database API）是浏览器提供的一个客户端 NoSQL 数据库存储 API。它支持储存大量结构化数据、事务机制、索引查询以及离线应用缓存等高级功能。比起 localStorage，IndexedDB 容量更大、功能更强，设计用于构建复杂、高效的前端数据驱动应用。

核心概念与优势解析

NoSQL 数据库架构

在浏览器中提供对象存储（object store），结构类似 MongoDB 和 CouchDB，支持 JSON 对象储存，并通过键进行访问 ([turn0search20], [turn0search2])。

事务与一致性

所有增删改查操作必须在事务内执行，保障数据一致性、避免中途异常造成状态错乱 ([turn0search4]）。

版本管理机制

IndexedDB 支持数据库版本号升级机制。通过 onupgradeneeded 事件定义或改写存储结构，有助于逐步更新 schema ([turn0search1], [turn0search2])。

IndexedDB 使用教程：入门示例

1. 检查支持 / 打开数据库

if (!window.indexedDB) {
  alert("您的浏览器不支持 IndexedDB");
}
const request = indexedDB.open("MyAppDB", 1);

2. 创建对象存储与索引（在 onupgradeneeded 中执行）

request.onupgradeneeded = event => {
  const db = event.target.result;
  const store = db.createObjectStore("todos", { keyPath: "id", autoIncrement: true });
  store.createIndex("by_title", "title", { unique: false });
};

3. 成功连接数据库

request.onsuccess = event => {
  const db = event.target.result;
  // 之后便可基于 db 进行操作
};
request.onerror = event => {
  console.error("连接数据库失败：", event.target.errorCode);
};

4. 增删改查操作示例

const tx = db.transaction("todos", "readwrite");
const store = tx.objectStore("todos");
store.add({ title: "Learn IndexedDB", done: false });
tx.oncomplete = () => console.log("添加成功");

读取数据：

const tx2 = db.transaction("todos", "readonly");
tx2.objectStore("todos").get(1).onsuccess = e => {
  console.log("读取结果：", e.target.result);
};

5. 使用 Promises 简化编码（基于 idb 封装库）

import { openDB } from 'idb';

const db = await openDB('MyAppDB', 1, {
  upgrade(db) {
    db.createObjectStore("notes", { keyPath: "id", autoIncrement: true });
  }
});
await db.add("notes", { text: "Hello World" });
const note = await db.get("notes", 1);
console.log(note);

适用场景与最佳实践

• 离线 Web 应用：如 PWA 缓存数据与日志存储，提升离线访问体验。
• 大数据或二进制数据缓存：可存储图片、视频、文件等大块内容。
• 复杂查询需求：与索引结合，可实现高效过滤与检索操作。
• 项目迭代升级：版本升级机制方便 progressive schema 修改。

技巧总结与提示

API 异步性：IndexedDB 几乎所有操作都是异步事件模式，推荐使用 Promise 封装保持代码简洁。

事务一致性：批量操作请放进同一个事务使用，以保证操作完整性。

错误处理不可忽略：必须通过 onerror 或 Promise catch 捕获失败，保障应用健壮性。

避免数据冗余：合理设计对象存储与索引，按需创建，避免无用对象占用空间。

兼容性检测：虽然主流浏览器均支持 IndexedDB，但建议前置检测并提供 fallback（如 localStorage）。

IndexedDB 是现代 Web 开发不可或缺的本地存储工具，适合离线、重数据和复杂查询需求场景。通过这篇教程，从它的工作原理到代码操作示例、使用场景与优化建议，你已经具备了上手实战的能力。