快速上手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)
複製代碼