快速上手indexedDb进行业务开发

这篇文章不是对indexedDb进行详细介绍，只是我在上手使用中发现完整介绍怎么使用indexedDB的资料实在太少，大部分就是为了混个阅读量简单介绍一下，因此整理一些我在使用过程当中的经验方便你们在业务压力下快速上手

传送门：

developer.mozilla.org/zh-CN/docs/…

dexie.org/docs/

在你使用IndexedDB以前你须要先弄懂的 1 什么是IndexedDB 2 为何要用IndexedDB 而后再看怎样用，固然你急着要用能够直接跳过

官方解释 IndexedDB是一个基于JavaScript的面向对象的数据库。 IndexedDB容许您存储和检索用键索引的对象；能够存储结构化克隆算法支持的任何对象。

首先他是个数据库，那么做为数据库你就要明白他的基本模式就是一个库（db）里边装若干个表(table)，而后再看他的一些特点

1 他是基于键值对存储的这一点和storage有点像

2 支持结构化数据的存储

3 因为indexedDb是存储在本地磁盘，因此理论上硬盘有多大就能够存多少

4 他的全部操做都是异步

indexedDB is an asynchronous database, meaning that any operation that requires a result won’t be returned directly

5 支持事务

Whenever you are going to do more than a single operation on your database in a sequence, you would normally use a transaction. Transaction represents a full ACID transaction

ACID 原子性（Atomicity）、一致性（Consistency）、隔离性（Isolation）、持久性（Durability）

再根据他的特性和业务考量为何要不要使用indexedDb,若是就是想存存用户信息，token之类的仍是用JSON+storage吧，即插即用同步操做，安全又方便。可是若是是须要缓存大量的结构化数据文件，就像个人业务每一个用户都有4到5份大小为10M+的对应的文件须要从服务器下载过来，若是每次都去请求接口重复的去下载文件，会形成极大的资源损失，这时候我只须要以用户的惟一标识做为key将对应的数据在第一次请求时缓存起来就能够了

OK,如今再来看若是简单快捷的使用 因为indexedDb的原生api用起来有些繁琐，因此我选择的别人封装的特别好的一个三方库dexie.js,我这边是基于Vue生态也就是ES modules环境

1 npm install dexie --save

2 新建配置文件dbConfig.js(名字随意)

import Dexie from 'dexie';

const db = new Dexie('db');
db.version(1).stores({
    pd: `flagStr`,
});
db.version(2).stores({
    doc: '&examUID'
});

export default db;
复制代码

api

1 创建数据库 var db = new Dexie(databaseName, options?);

Dexie is the main class and the default export of the library. An instance of this class represents an indexedDB database connection.

这里传入数据库的名字和后边的配置项便可生成Dexie实例做为数据库的链接，之后的全部增删改查都是基于这个实例，咱们没有特殊处理的状况下传个数据库名就能够了

2建完库而后就是建表语句了 version.stores(schemaDefinition);

Object where each key represents the name of an object store and each value represents the primary and secondary indexes

schemaDefinition 是建表规则,传入一个对象以key为表名，val做为表的字段名和相关规则 注意indexedDb和mysql是有区别的，他不用像sql建表同样把全部的字段名都写出来，你只须要声明你须要的主键以前我就踩过这个坑

Unlike SQL, you don’t need to specify all properties but only the one you wish to index.

错误示例
// db.version(2).stores({
//     doc: '&examUID,reportStatus,relateReport,FontReport,ExamResult,ExamImage,ExamFilm,LabRequest'
// });
复制代码

而后把数据库对象抛出便可

3 在main.js内全局引用挂载在vue对象上便可全局使用

import db from '../src/config/dbConfig'
Vue.prototype.db = db
复制代码

4 最后根据实际业务对数据库进行增删改为便可，因为indexedDb是异步的。你可使用回调，promise，async都随意，这里能够参考我对异步的处理 我使用的async，在对数据库的操做封装成一个个async方法，因为async方法返回的是一个promise对象，一样能够await来同步他

例

generateFcn.js
  // 缓存内取出报告数据
  async getCacheDoc(uid, docType) {
    let d = await db.doc.get({ examUID: uid });
    if (!d) return false
    if(!d[docType]) return false
    return d[docType]
  }
....


XXXPage.vue
...
import fcn form '@generateFcn.js'
method:{
    async getDoc(){
        let r = await this.fcn.getCacheDoc(....)
        console.log(r)
    }
}
...
  
 
复制代码

最后在介绍几个经常使用的api，因为我所涉及的业务场景对indexedDB只有存储和获取的需求，因此也只介绍相关api，你们若有须要能够直接上文档查询，都是些顾名思义的api

1 tabke.clear()

顾名思义，和storage的clear()同样用于清空数据库

2 table.count()

返回当前版本库内数据的条数

3 table.put(主键，data) 我主要用来对作新增操做，若是当前版本库没有该主键的数据则新增，若是有则覆盖

If an object with the same primary key already exists, it will be replaced with the given object. If it does not exist, it will be added.

4 table.update(主键，data) 这个我主要用来作某条数据的更新操做，好比更新某个用户的某个报告，这个时候你用put就会把原来的替换掉了，当数据库没有这条数据的时候是没用的，因此我通常是先查有没有再决定用哪一个

5 table.get(主键)

顾名思义

5 若是定时清除缓存

因为业务比较赶，因此我这边直接setInterval了，因为setInterval的回调时宏任务，primise的回调时微任务，因此每次清空以前，全部的数据库操做都会执行完，感谢js的单线程事件循环咱们不用担忧清空和数据库操做同时发生而产生的问题

setInterval(()=>{
     db.doc.count(x=>{
         if(x!==0) db.doc.clear()
     })
 },10000)
复制代码