使用Dexie操作前端数据库IndexedDB 教程
Dexie.js 是对前端本地数据库 IndexedDB 的 API 进行封装的轻量级库，它简化了 IndexedDB 复杂的原生操作，提供了更简洁、直观的语法，便于开发者快速实现前端本地数据的持久化存储。
一、为什么选择 IndexedDB？
前端常见的本地存储方案（Cookie、LocalStorage、SessionStorage）均存在存储容量限制，无法满足大数据量的存储需求。IndexedDB 作为浏览器原生的本地数据库，具备大容量存储优势，具体对比如下：
- Cookie：存储容量不超过 4KB，主要用于存储会话标识等少量信息；
- LocalStorage：存储容量介于 2.5MB ~ 10MB 之间，仅支持字符串存储；
- SessionStorage：存储容量与 LocalStorage 相当，但仅在当前会话有效，页面关闭后数据丢失；
- IndexedDB：存储容量不低于 250MB，支持占用本地磁盘空间的 50%，可存储大量结构化数据，支持事务、索引等数据库核心特性。
二、安装 Dexie
使用包管理器（pnpm、npm、yarn）快速安装 Dexie：
pnpmadd dexie
三、核心操作步骤
3.1 创建数据库（Database）
通过 new Dexie() 创建数据库实例，指定数据库名称。若数据库不存在则自动创建，若已存在则直接打开。
3.2 创建表（Table）
通过 version().stores() 定义数据库版本及表结构，包括主键、索引等信息。表结构定义需与数据库版本绑定，版本升级时可同步更新表结构。
importtype{ Table }from'dexie';// 定义表结构：版本1中创建 "users" 表 db.version(1).stores({ users:'++id, userName',// ++id 表示自增长主键；userName 表示为该字段创建索引});// 获取 "users" 表实例，用于后续数据操作let users: Table<StoreUserData>; users = db.table('users');
说明：
- ++id：自增长整数主键，插入数据时无需手动指定 id，数据库会自动生成；
- userName：为该字段创建索引，可提升按 userName 查询的效率。
3.3 数据操作：增删改查（CRUD）
3.3.1 新增数据（增）
使用 add() 方法插入单条数据，主键（id）会自动生成。
// 插入一条用户数据，无需指定 id db.users.add({ userName:'zhangsan'});
3.3.2 修改/新增数据（改）
使用 put() 方法实现'插入或更新'（upsert）功能：若数据不存在（根据主键判断）则新增，若已存在则覆盖修改。
// 若 id=1 的数据存在则修改 userName，不存在则新增该数据 db.users.put({ id:, userName:})
