使用 Dexie.js 简化访问浏览器本地数据库 IndexedDB

localStorage 本地存储各家浏览器分别限制在 2.5M ~ 10M 之间,本地浏览器需要存储较大数据的时候就不能用了, IndexedDB 就能解决这个问题。

IndexedDB 是存储结构类似 MangoDB 的对象存储数据库,不是关系型数据库。 IndexedDB API 稍微有点麻烦,用 Dexie.js 可简化操作。

基本操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// 创建/打开 数据库
const db = new Dexie('MyDatabase');

// 定义存储(表)结构
db.version(1).stores({
persons: '++id, name, age', // 定义 persons 表,++ 为自增类型,第一个字段为主键。
});

// 写入数据
db.persons.add({name: '老王', age: 49, address: '没定义的字段也能存'});

// 批量写入
db.persons.bulkAdd([
{ name: "李雷", age: 21 },
{ name: "韩梅梅", age: 22 },
{ name: "老李", age: 65 },
]).then(() => {
// ...
});

// 覆盖写入
db.persons.put({id: 1, name: '小明', age: 18});

// 批量覆盖写入
db.persons.bulkPut([
{ id: 1, name: "李雷", age: 21 },
{ id: 2, name: "韩梅梅", age: 22 },
{ id: 3, name: "老李", age: 65 },
]).then(() => {
// ...
});

// 读取数据
db.persons.get(1).then(item => {
if (!item) {
// 如果主键为 1 的数据不存在,item 将为 undefined
return;
}
// ...
});
// 批量读取数据
db.persons.bulkGet([1,3,5]).then(items => {
items.forEach(item => {
if (!item) {
// 如果主键对应的数据不存在,item 将为 undefined
return;
}
// ...
});
});

// 查询数据
db.persons.where({age: 18}); // WHERE age = 18
db.persons.where({name: '李雷', age: 18}); // WHERE name = '李雷' AND age = 18
db.persons.where(age).above(20); // WHERE age > 20
db.persons.where(age).aboveOrEqual(20); // WHERE age >= 20
db.persons.where(age).below(20); // WHERE age < 20
db.persons.where(age).belowOrEqual(20); // WHERE age <= 20
db.persons.where(age).anyOf([18, 19, 20]); // WHERE age IN(18,19,20)

// 分页
const pageSize = 20;
const page = 2;
db.persons.offset((page-1)*pageSize).limit(pageSize);

// 排序
db.persons.orderBy(age); // 正向排序
db.persons.orderBy(age).desc(); // 反向排序

查询筛选器

  • above() 返回索引位于给定键之上的对象集合
  • aboveOrEqual() 返回索引高于或等于给定键的对象集合
  • anyOf() 返回一个对象集合,其中索引等于给定数组中的任何键
  • anyOfIgnoreCase() 返回一个对象集合,其中索引与任何给定字符串匹配,忽略大小写差异。
  • below() 返回索引低于给定键的对象集合
  • belowOrEqual() 返回索引低于或等于给定键的对象集合
  • between() 返回索引位于给定边界之间的对象集合
  • equals() 返回索引等于给定键的对象集合
  • equalsIgnoreCase() 返回一个对象集合,其中索引等于给定的字符串键,忽略大小写差异
  • inAnyRange() 返回索引在任何给定范围内的集合。
  • noneOf() 返回一个集合,其中index等于给定数组中任何键以外的任何键
  • notEqual() 返回一个集合,其中index不等于给定值
  • startsWith() 返回一个对象集合,其中索引以给定的字符串键开头
  • startsWithAnyOf() 返回一个对象集合,其中索引以任何给定字符串开头
  • startsWithIgnoreCase() 返回一个对象集合,其中索引以给定的字符串键开头,忽略大小写差异
  • startsWithAnyOfIgnoreCase() 返回一个对象集合,其中索引以任何给定字符串开头,忽略大小写差异

Dexie.js 文档

使用 Dexie.js 简化访问浏览器本地数据库 IndexedDB

https://coderpan.com/front-end/dexie-indexeddb.html

作者

CoderPan

发布于

2023-02-13

更新于

2024-02-08

许可协议

评论