Dexie.js

前置知识

什么是indexedDB

indexedDB-MDN[1]

介绍

Dexie.js是一个基于Promise的浏览器数据库解决方案，更好的操作indexedDB。

为什么使用

原生indexedDB操作起来比较麻烦，有如下缺点

o 原生indexedDB操作使用回调函数

o 不断的创建事务，判断表和索引是否存在

o 创建索引很麻烦

o 原生查询简单；复杂查询需自己实现

o 不支持批量操作

o 须在每个回调函数中进行错误处理，麻烦

Dexie.js解决以上问题，使用起来更简单，更方便。

o 几乎所有接口支持promise

o 既保持对原生接口的支持，又扩展了很多实用接口

o 批量操作

o 支持链式调用

o 便捷的索引创建方式

使用

安装

npm install dexie;

简单使用

创建数据库及表

import Dexie from 'dexie';
let db = new Dexie('db');// 创建数据库，已有则建立链接
db.version(1).stores({
   logs:'++id,done,value,ctime' 
}); // 创建表，已有表则建立链接，id为自增主键；仅需要列举需要索引的字段即可，indexedDB属于NoSQL数据库。

新增数据

await db.logs.add({done:true,value:'test',ctime:Date.now()});

有关插入或更新数据的方法，还包括put，bulkAdd，bulkPut等，具体可参考官方文档[2]。

删除数据

await db.logs.delete(id);// 删除单条数据
await db.logs.bulkDelete([id1,id2]);// 删除多条数据
await db.logs.clear();// 删除所有数据

查询数据

await db.logs.where('done').equals(true).toArray();// 查询所有done为true的数据
await db.logs.where('ctime').between(0,Date.now(),true,true).toArray();// 查询ctime在0到当前时间的数据，包含边界值。
await db.logs
    .where('done').equals(true) // done为true
    .and(v=>v.ctime>0) // 按ctime大于0过滤
    .offset(10) // 跳过前10条数据 
    .limit(10) // 限制返回10条数据,即从第二页开始返回10条数据
    .toArray();// 多条件查询

另外where支持链式调用和动态生成，可参考使用 Dexie.js 进行范围查询、多条件查询等复杂操作[3];
详细查询方法，请参考官方文档[4]。

引用链接

[1] indexedDB-MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API
[2] 官方文档: https://dexie.org/docs/Table/Table
[3] 使用 Dexie.js 进行范围查询、多条件查询等复杂操作: https://blog.csdn.net/maply/article/details/144983564
[4] 官方文档: https://dexie.org/docs/WhereClause/WhereClause