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

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

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

基本操作

// 创建/打开 数据库
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 文档