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

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

• 引言：为什么需要前端数据库？
• IndexedDB核心概念解析
  • 1. 数据库（Database）
  • 2. 对象存储（Object Store）
  • 3. 索引（Index）
  • 4. 事务（Transaction）
  • 5. 游标（Cursor）
• 完整代码示例：实现一个联系人管理器
  • 1. 初始化数据库
  • 2. 添加联系人
  • 3. 查询联系人
    • 通过ID查询
    • 通过索引查询
  • 4. 更新联系人
  • 5. 删除联系人
  • 6. 高级查询：使用游标和范围
• IndexedDB最佳实践
• IndexedDB的浏览器支持情况
• 使用第三方库简化开发
• 常见应用场景
• 总结

引言：为什么需要前端数据库？

在现代Web开发中，我们经常需要处理大量结构化数据。传统的localStorage和sessionStorage虽然简单易用，但只能存储少量字符串数据，无法满足复杂应用的需求。IndexedDB应运而生——这是一个功能强大的浏览器内置数据库，支持存储大量结构化数据，提供索引、事务等高级功能，是实现离线应用、缓存机制和复杂数据处理的理想选择。

IndexedDB核心概念解析

1. 数据库（Database）

• 每个源（协议+域名+端口）可以创建多个数据库
• 每个数据库包含多个对象存储（类似于SQL中的表）

2. 对象存储（Object Store）

• 存储键值对集合的主要容器
• 键可以是路径、自增数字或自定义键生成器
• 值可以是任何结构化可克隆对象

3. 索引（Index）

• 允许高效查询对象存储中的数据
• 可以基于对象属性创建多个索引
• 支持唯一索引约束

4. 事务（Transaction）

• 所有操作都在事务中执行
• 三种模式：只读（readonly）、读写（readwrite）和版本变更（versionchange）
• 提供原子性保证（全部成功或全部失败）

5. 游标（Cursor）

• 用于遍历对象存储或索引中的记录
• 支持方向控制（前进/后退）和范围查询

完整代码示例：实现一个联系人管理器

1. 初始化数据库

// 打开或创建数据库const dbName ='ContactDB';const dbVersion =1;const request = indexedDB.open(dbName, dbVersion); request.onerror=(event)=>{  console.error('数据库打开失败:', event.target.error);}; request.onupgradeneeded=(event)=>{ const db = event.target.result;// 创建对象存储（如果不存在）if(!db.objectStoreNames.contains('contacts')){ const store = db.createObjectStore('contacts',{  keyPath:'id', autoIncrement:true});// 创建索引 store.createIndex('name','name',{  unique:false}); store.createIndex('email','email',{  unique:true}); store.createIndex('phone','phone',{  unique:false}); store.createIndex('group','group',{  unique:false});}}; request.onsuccess=(event)=>{ const db = event.target.result; console.log('数据库成功打开');// 存储数据库引用供后续使用 window.contactDB = db;};

2. 添加联系人

functionaddContact(contact){ returnnew