2019年不能错过的前端本地储存idb-js

背景：

随着PWA的不断推动，以及前端需求的愈来愈复杂，indexdb成为了愈来愈多公司的前端本地存储方案。为何是indexdb，而不是localstorage。前端

• indexdb支持事务，操做步骤中一步失败，整个事务取消，不存在只改写一部分数据的状况。
  
• indexdb的存储量大，通常很多于250M。
• indexDB是异步的，操做不会锁死浏览器。

idb-js：

那 idb-js 又是什么呢？使用过 indexdb 的同窗都知道，indexdb 若是不封装的话写起来很是的繁琐，并且目前相应的文档又很少。idb-js 就是对 indexdb 的简单封装，暴露了一些经常使用的增删查改操做。下面咱们简单的来看看：git

首先，咱们要对数据库进行配置，建立一个 db_student_config.js 文件，表示student的数据库，将配置以对象方式暴露出去。github

配置中包括 数据库名字，数据库版本号，表的配置（可多张）。
数据库

// in db_student_config.js
 
export default {
        dbName: "student",   // *数据库名称
        version: 1,        // 数据库版本号（默认为当前时间戳）
        tables: [         // *数据库的表，即ObjectStore
            {
                tableName: "grade",     // *表名
                option: { keyPath: "id" },   // 表配置，即ObjectStore配置，此处指明主键为id
                indexs: [     // 数据库索引（建议加上索引）
                    {
                        key: "id",    // *索引名
                        option:{       // 索引配置，此处表示该字段不容许重复
                            unique: true
                        }
                    },
                    {
                        key: "name"
                    },
                    {
                        key: "score"
                    }
                ]
            }]
}
复制代码

而后，咱们引入配置，开始建立数据库。
浏览器

import Idb from 'idb-js'  //  引入Idb

import db_student_config from './db_student_config' // 引入刚才的配置

Idb(db_student_config).then(student_db => {...})  // 载入配置，生成数据，拿到db实例进行后面操做。复制代码

这时候，咱们就能够看到浏览器上的数据库创建好了
bash

拿到 student_db 后，我就能够操做了，好比来个添加，插入三条数据，调用 insert 方法：异步

student_db.insert(
 { 
    tableName: "grade",
    data: [ 
      {  id: 1,score: 98, name: "小明"},
      { id: 2, score: 100,name: "小华" },
      { id: 3,score: 97,name: "小红"}      
    ]
 }
);复制代码

咱们能够看到数据库此时多了三条数据：ui

是否是很方便，^-^。spa

文档和仓库地址：

idb-js更多的操做请查看idb-js的文档，顺便给个star支持一下，欢迎你们提issue。localstorage

github地址

文档地址