前端数据库 IndexedDB 详解：构建强大的离线Web应用

 

🌐 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);
};
php
490 Bytes
© 菜鸟-创作你的创作

---

四、增删改查操作

1. 添加数据

const transaction = db.transaction("users", "readwrite");
const store = transaction.objectStore("users");
store.add({ name: "Alice", age: 25 });
php
144 Bytes
© 菜鸟-创作你的创作

2. 查询数据

const request = store.get(1); // 根据主键查询
request.onsuccess = function(event) {
  console.log(request.result);
};
php
111 Bytes
© 菜鸟-创作你的创作

3. 更新数据

const request = store.put({ id: 1, name: "Alice", age: 26 });
php
61 Bytes
© 菜鸟-创作你的创作

4. 删除数据

store.delete(1); // 删除主键为 1 的数据
php
31 Bytes
© 菜鸟-创作你的创作

5. 遍历数据

store.openCursor().onsuccess = function(event) {
  const cursor = event.target.result;
  if(cursor) {
    console.log(cursor.value);
    cursor.continue();
  }
};
php
162 Bytes
© 菜鸟-创作你的创作

---

五、事务与错误处理

• 事务类型：
  • "readonly"：只读事务
  • "readwrite"：可读写事务
• 事务自动提交：事务完成后自动提交或回滚
• 错误处理：

transaction.onerror = function(event) {
  console.error("事务失败:", event.target.error);
};
php
88 Bytes
© 菜鸟-创作你的创作

---

六、离线应用实践

1. 缓存用户操作数据，待网络恢复再同步到服务器
2. 配合 Service Worker，实现 PWA 离线访问
3. 存储大文件，如图片、音频、视频 Blob 数据

// 存储图片
const imgTransaction = db.transaction("images", "readwrite");
const imgStore = imgTransaction.objectStore("images");
imgStore.add({ id: 1, data: blob });
php
161 Bytes
© 菜鸟-创作你的创作

---

七、实用技巧

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

---

💡 总结

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

https://www.52runoob.com/archives/5967