超方便的 IndexDB 庫

前言

作爲 Web 瀏覽器層的本地存儲，IndexDB 作爲一個很好的選擇，幾乎能夠存儲任意類型的數據，且是異步的。可是正常使用方式下須要在監聽各類事件來處理結果，不是很方便，下面就對這一層進行了包裝，使用方便。

---

IndexDBWrapper 庫

IndexDBWrapper 庫是參考 workbox 相關 DB 操做開發的，下面具體說明下使用。

包地址：www.npmjs.com/package/ind…

安裝：

npm i indexdbwrapper
複製代碼

使用：

import IndexDBWrapper from "indexdbwrapper";
複製代碼

構造器

const db = new IndexDBWrapper(name, version, { onupgradeneeded })
複製代碼

• name: 數據庫名
• version：數據庫版本
• onupgradeneeded：數據庫更新方法

靜態方法

刪除數據庫：

IndexDBWrapper.deleteDatabase(name)
複製代碼

• name：數據庫名

屬性

db：實際的 IndexDB IDBDatabase 對象。

db.db;
複製代碼

實例方法

open：打開數據庫。

db.open();
複製代碼

close：關閉數據庫。

db.close();
複製代碼

add：指定 store 添加數據。

db.add(storeName, value, key?);
複製代碼

clear: 指定 store 清空數據。

db.clear(storeName);
複製代碼

count：指定 store 獲取數量。

db.count(storeName, query:IDBKeyRange?);
複製代碼

get：指定 store 和主鍵獲取數據。

db.get(key);
複製代碼

put：指定 store 添加或更新數據。

db.put(storeName, value, key?);
複製代碼

delete：指定 store 和 key 刪除符合條件的數據。

db.delete(storeName, key);
複製代碼

getKey：獲取符合條件的 key。

db.getKey(storeName, query);
複製代碼

getAll：獲取符合條件的全部數據。

db.getAll(storeName, query, count);
複製代碼

getAllKeys：獲取符合條件的全部 key。

db.getAllKeys(storeName, query, count);
複製代碼

getAllMatching：獲取符合條件的全部數據。（經常使用）

db.getAllMatching(storeName, { index, query = null, direction = "next", count, includeKeys });
複製代碼

transaction：包裝後的事務。

db.transaction(storeNames, type, callback);
複製代碼

實例

打開數據庫 db1 並，建立表 t1，及索引 name、age：

const db = new IndexDBWrapper("db1", 1, {
  onupgradeneeded: e => {
    const db = e.target.result;
    const objStore = db.createObjectStore("t1", {
      autoIncrement: true,
      keyPath: "id"
    });
    objStore.createIndex("name", "name", { unique: !1 });
    objStore.createIndex("age", "age", { unique: !1 });
  }

複製代碼

添加數據，{name: '張三', age: 18}：

db.add('t1', {name: '張三', age: 18});

// 或者
db.put('t1', {name: '張三', age: 18});
複製代碼

查找全部 name 爲 張三的數據：

db.getAllMatching('t1', {index: 'name', query: IDBKeyRange.only('張三')});
複製代碼

查找全部 age 大於等於 18 的數據：

db.getAllMatching('t1', {index: 'age', query: IDBKeyRange.lowerBound(18)})
複製代碼

修改全部 name 爲 張三的數據，改成 李四：

db.getAllMatching("t1", {
  index: "name",
  query: IDBKeyRange.only("張三"),
  includeKeys: 1
}).then(data =>
  Promise.all(data.map(item => db.put("t1", { ...item.value, name: "李四" })))
);
複製代碼

刪除全部 name 爲 李四的數據：

db.getAllMatching("t1", {
  index: "name",
  query: IDBKeyRange.only("李四"),
  includeKeys: 1
}).then(data =>
  Promise.all(data.map(item => db.delete("t1", item.primaryKey)))
);
複製代碼

---

博客名稱：王樂平博客

CSDN博客地址：blog.csdn.net/lecepin

本做品採用 知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。