使用第三方库访问IndexedDB

提示：本片博客借鉴《Electron实战：入门、进阶与性能优化》

---

前言

对你有用的话，可否给博主点个小赞赞 ------

虽然使用原生JavaScript访问IndexedDB是完全没问题的，但由于其API设计比较传统，大部分数据读写操作都是异步的，因此需要使用大量的回调函数和事件注册函数，并没有Promise版本的API用，所开发效率并不高。开发者如果不希望使用第三方库，那么可以参阅此文档来完成IndexedDB数据访问工作:https://wangdoc.com javascript/bom/indexeddb.html。
开源社区也发现了这个问题，因此有很多人提供了IndexedDB的封装库，比如Idb(https://github.com/jakearchibald/idb)和Dexiejs(https://github.com/dfahlander/Dexie. js)。这两个库都提供了IndexedDB 数据访问的Promise API。从我的经验而言Dexie.is更胜一筹，更推荐大家使用。下面我们介绍一下它的基本用法:

---

一、DexieJS添加

npm i dexie@3.2.2 --save

二、DexieJS基本用法

//创建一个名为testDb的IndexedDB数据库
let db = new Dexie("testDb");
//默认dbversion(1)，也可以是dbversion(2),添加了两张表（articles，settings）
db.version(1).stores({articles: "id",settings: "id"});
//dbversion(2)时添加以一张users表
db.version(2).stores({articles: "id",settings: "id",users: "id"})

三、DexieJS语法

//增加数据
await db.articles.add({id: 0, title: 'test'});
//查询数据 标题为test的所有数据
await db.articles.filter(article=> article.title === "test").toArray();
//查询articles表所有数据
await db.articles.toArray()
//修改数据
await db.articles.put({ id: 0, title:'testtest'});
//删除数据
await db.articles.delete(id);
//排序数据
await db.articles.orderBy('title');

四、使用

更具自己需要，建一个文件server.js

import Dexie from 'dexie';
const db:any = new Dexie('liveDrive')
 db.version(1).stores({
     test0: "++id,name,section",
     test1:"++id,name,path",
     test2:"++id,name,path",
     test3:"++id,name",
 })

//添加数据
export const test0AddApi = () => {
     return new Promise((resolve, reject) => {
        db.test0.add({id:1,name:'小方',section:[2,3,44,55,22,34,40]})
            .then((result:any)=>{
                resolve(result)
            }).catch((err:any)=>{
            reject(err)
        })
     })
}
//查询test0的所有数据
export const readTest0Api = () => {
    return new Promise((resolve, reject) => {
        db.test0.toArray()
            .then((res:any)=>{
            resolve(res)
        }).catch((err:any)=>{
            reject(err)
        })
    })
}
//判断是否有同样的名字，有提示，没有添加
export const saveTest0Api = (data:any) => {
    return new Promise((resolve, reject) => {
       db.test0.filter((item:any)=>data.name=== item.name)
           .toArray()
           .then(async (selectName:any) =>{
              if(isEmpty(selectName)){
                 let saveName = await db.test0AddApi .add({...data})
                  resolve({
                      code:200,
                      msg:"添加成功"
                  })
              }else {
                  resolve({
                      code:200,
                      msg:"该名称已存在"
                  })
              }
            })
           .catch((err:any)=>{
               reject({
                   code:400,
                   msg:err
               })
           });
    })
}

五、页面调用

import {saveTest0Api , test0AddApi } from "@/api/server";

//data为需要保存的数据
let result = await saveTest0Api(data);
//返回的数据为数组
let result = await test0AddApi();

---

总结

文档地址：
Idb：https://github.com/jakearchibald/idb
Dexie.js：https://dexie.org/docs/Dexie/Dexie
dexie这个地址也推荐看看：https://kurimudb.nito.ink/drivers/dexie.html
pouchdb：https:// pouchdb.com/
rxdb 它是一个可以运行在各大浏览器和Electron内的实时数据库。它最大的特点就是支持订阅数据变更事件当你在一个窗口更改了某个数据后，你无需再发消息通知另一个窗口，另一个窗口就能通过数据变更事件获悉变更的内容。对于需要向用户显示实时数据的客户端应用程序来说，这非常有用.
rxdb 开源地址为:https://github.com/pubkey/rxdb。