使用 Dexie 操作前端数据库 IndexedDB
Dexie.js 是对前端本地数据库 IndexedDB API 的封装库,它简化了原生操作的复杂性,提供了更简洁直观的语法,便于开发者快速实现前端本地数据的持久化存储。
为什么选择 IndexedDB?
前端常见的本地存储方案(Cookie、LocalStorage、SessionStorage)均存在容量限制,难以满足大数据量需求。IndexedDB 作为浏览器原生的本地数据库,具备大容量存储优势:
- Cookie:不超过 4KB,主要用于会话标识;
- LocalStorage:2.5MB ~ 10MB,仅支持字符串;
- SessionStorage:与 LocalStorage 相当,但页面关闭后丢失;
- IndexedDB:不低于 250MB,可占用本地磁盘空间 50%,支持结构化数据、事务及索引。
安装 Dexie
通过包管理器快速安装:
pnpm add dexie
核心操作步骤
创建数据库
使用 new Dexie() 创建实例并指定名称。若数据库不存在则自动创建,已存在则直接打开。
定义表结构
通过 version().stores() 绑定版本与表结构,包括主键和索引。版本升级时可同步更新结构。
import { Table } from 'dexie';
// 定义表结构:版本 1 中创建 "users" 表
db.version(1).stores({
users: '++id, userName' // ++id 表示自增长主键;userName 为索引字段
});
// 获取 "users" 表实例
let users: Table<StoreUserData>;
users = db.table('users');
说明:
++id:自增长整数主键,插入时无需手动指定;userName:建立索引以提升查询效率。
数据操作(CRUD)
新增数据
使用 add() 方法插入单条数据,主键自动生成。
// 插入一条用户数据,无需指定 id
db.users.add({ : });

