使用Dexie操作前端数据库IndexedDB
Dexie.js对前端数据库IndexedDB的API进行了一个封装。
为什么需要IndexedDB？因为其他方案存储不了大数据：
- Cookie 不超过4KB;
- LocalStorage 2.5MB 到 10MB 之间
- SessionStorage 2.5MB 到 10MB 之间。
- IndexedDB 不少于 250MB，可以使用本地磁盘空间50%。
安装Dexie
pnpm add dexie
创建数据库（DataBase）
import Dexie from 'dexie'
const db = new Dexie('userDB');
创建了一个名为userDB的一个数据库(DataBase)，如果不存在则创建，如果存在则打开。
创建表（Table）
import type { Table } from 'dexie'
db.version(1).stores({
users: '++id, userName',
});
let users: Table<StoreLevelData>
users = db.table('users')
- 创建了一个名为
users的表(Table)； users表具有一个名为id的自增长主键字段，以及一个名为userName的索引。
增
db.users.add({
userName: 'zhangsan'
})
改
db.users.put({
id: 1,
userName: 'zhangsan'
})
相当于后端数据库里面的upsert，即：不存在则新增，存在则修改。
删
db.users.delete(1)
查
可以简单的通过主键来查询：
db.users.get(1).then(res=>console.log(res))
或者通过条件来查询：
db.users.where("userName")
db.users.where({userName: "zhangsan"})
查询第一条：
db.users.orderBy('id').first()
查询最后一条：
db.users.orderBy('id').last()
查询表的行数：
db.users.count()
分页查询：
db.users.orderBy('id').reverse().offset(0).limit(100).toArray()
Typescript简单封装
export interface StoreUserData {
id?: number
userName: string
}
export class UserDataBase extends Dexie {
users!: Table<StoreUserData>
localVersions = 1
constructor() {
super('UserDataBase')
this.version(this.localVersions).stores({
users: '++id, userName'
})
this.users = this.table('users')
}
}
export const usersDB = new UserDataBase()
怎么查看IndexedDB的数据？
打开浏览器的开发者工具：
应用 -> 存储 -> IndexedDB
基本的查看，修改功能都具备有。
