前端 IndexedDB 实战：使用 Dexie.js 实现数据持久化

修改/新增数据

使用 put() 实现'插入或更新'（upsert）。根据主键判断，不存在则新增，存在则覆盖。

// 若 id=1 存在则修改，不存在则新增
db.users.put({ id: 1, userName: 'zhangsan' });

删除数据

使用 delete() 根据主键删除单条记录。

查询数据

Dexie 提供丰富的查询方法，支持主键、条件、排序及分页：

// 1. 按主键查询单条数据
db.users.get(1).then(res => console.log('主键 id=1 的用户：', res));

// 2. 条件查询
// 方式 1：按字段条件查询
db.users.where('userName').equals('zhangsan').toArray().then(res => 
  console.log('用户名为 zhangsan 的用户：', res)
);

// 方式 2：按对象匹配条件查询
db.users.where({ userName: 'zhangsan' }).toArray().then(res => 
  console.log('用户名为 zhangsan 的用户：', res)
);

// 3. 查询第一条数据（按 id 升序）
db.users.orderBy('id').first().then(res => 
  console.log('第一条用户数据：', res)
);

// 4. 查询表中数据总数
db.users.count().then(count => 
  console.log('用户总数：', count)
);

// 5. 分页查询（倒序，前 100 条）
db.users
  .orderBy('id')
  .reverse() // 倒序排列
  .offset(0) // 跳过前 0 条
  .limit(100) // 限制数量
  .toArray()
  .then(res => console.log('分页查询结果：', res));

TypeScript 封装优化

结合 TypeScript 类型定义进行类封装，提升可维护性和类型安全性：

import { Table } from 'dexie';
import Dexie from 'dexie';

// 定义用户数据类型接口
export interface StoreUserData {
  id?: number;      // 主键可选，插入时自动生成
  userName: string; // 用户名，必传字段
}

// 封装数据库类
export class UserDataBase extends Dexie {
  users!: Table<StoreUserData>;
  private localVersions = 1;

  constructor() {
    super('UserDataBase');
    this.version(this.localVersions).stores({
      users: '++id, userName'
    });
    this.users = this.table('users');
  }
}

// 创建全局实例
export const usersDB = new UserDataBase();

查看 IndexedDB 数据

可通过浏览器开发者工具直观管理数据：

1. 打开开发者工具（F12 或 Ctrl+Shift+I）；
2. 切换到「应用」（Application）面板；
3. 左侧导航栏找到「存储」-「IndexedDB」；
4. 展开数据库（如 UserDataBase）和表（如 users），即可查看或编辑数据。

参考资料

• 阮一峰。浏览器数据库 IndexedDB 入门教程。
• Efficient In-Browser Storage with Dexie.js and Sveltekit.