超方便的 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)))
);
复制代码

---

博客名称：王乐平博客

优快云博客地址：blog.youkuaiyun.com/lecepin

本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

转载于:https://juejin.im/post/5d0b8d256fb9a07eb051c873