2019年不能錯過的前端本地儲存idb-js

背景：

隨着PWA的不斷推動，以及前端需求的愈來愈複雜，indexdb成爲了愈來愈多公司的前端本地存儲方案。爲何是indexdb，而不是localstorage。

• indexdb支持事務，操做步驟中一步失敗，整個事務取消，不存在只改寫一部分數據的狀況。
  
• indexdb的存儲量大，通常很多於250M。
• indexDB是異步的，操做不會鎖死瀏覽器。

idb-js：

那 idb-js 又是什麼呢？使用過 indexdb 的同窗都知道，indexdb 若是不封裝的話寫起來很是的繁瑣，並且目前相應的文檔又很少。idb-js 就是對 indexdb 的簡單封裝，暴露了一些經常使用的增刪查改操做。下面咱們簡單的來看看：

首先，咱們要對數據庫進行配置，建立一個 db_student_config.js 文件，表示student的數據庫，將配置以對象方式暴露出去。

配置中包括 數據庫名字，數據庫版本號，表的配置（可多張）。

// 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實例進行後面操做。複製代碼

這時候，咱們就能夠看到瀏覽器上的數據庫創建好了

拿到 student_db 後，我就能夠操做了，好比來個添加，插入三條數據，調用 insert 方法：

student_db.insert(
 { 
    tableName: "grade",
    data: [ 
      {  id: 1,score: 98, name: "小明"},
      { id: 2, score: 100,name: "小華" },
      { id: 3,score: 97,name: "小紅"}      
    ]
 }
);複製代碼

咱們能夠看到數據庫此時多了三條數據：

是否是很方便，^-^。

文檔和倉庫地址：

idb-js更多的操做請查看idb-js的文檔，順便給個star支持一下，歡迎你們提issue。

github地址

文檔地址