indexeddb-ht demo

graph TD
a["indexeddb-ht api"]---b["initDB<br/>初始化数据库"]
a---c["adData<br/>添加数据"]
a---d["rmDataById<br/>单删数据"]
a---e["clearData<br/>多删数据"]
a---f["mdDataById<br/>编辑数据"]
a---g["getDataById<br/>单查数据"]
a---h["queryData<br/>复杂查询"]
a---i["queryPage<br/>分页查询"]
a---j["countData<br/>查询数量"]
a---k["closeDB<br/>关闭数据库"]
style a fill:#903,color:#fff
style b fill:#366,color:#fff
style c fill:#366,color:#fff
style d fill:#366,color:#fff
style e fill:#366,color:#fff
style f fill:#366,color:#fff
style g fill:#366,color:#fff
style h fill:#366,color:#fff
style i fill:#366,color:#fff
style j fill:#366,color:#fff
style k fill:#366,color:#fff

1.安装、导入

npm i indexeddb-ht	#安装

import idb from 'indexeddb-ht'//全部导入

import {initDB, adData, rmDataById, clearData, countData, mdDataById, getDataById, queryData, queryPage, closeDB} from 'indexeddb-ht'//按需导入

2.初始化数据库

//数据库名称
let dbName = 'testDB';

//数据库版本
let dbVersion = 1;

//对象仓库数组，相当于MySQL的表结构
let objectStoreArr = [{
  name: 'userStore',
  index: [{
    keys: 'username',
    unique: false
  }, {
    keys: 'phone',
    unique: true
  }]
}];

idb.initDB(dbName, dbVersion, objectStoreArr).then(res => console.log(res));

3.添加数据

for (let i = 1; i <= 100; i++) {
  let storeName = "userStore";//对象仓库名称，相当于MySQL表名
  let data = {//对象数据，相当于MySQL行数据
    id: i,//id是必须的
    username: '张三' + i,
    phone: getRndInteger(13100000000, 13300000000)
  }
  idb.adData(storeName, data);//是adData，不是addData
}

4.删除数据

let storeName = "userStore";
let id = 3;
idb.rmDataById(storeName, id);//根据id删除单条数据

idb.clearData(storeName);//根据对象仓库名称，清空对象，等于全删

5.编辑数据

idb.mdDataById(storeName, {
    id: 5,//根据id编辑单条数据
    username: '李四',
    phone: 13800138000
  })

6.查询数据

let storeName = "userStore";

//根据id查询单条数据
idb.getDataById(storeName, 6).then(res => console.log(res));

//根据对象名称（表名）查询全部数据
idb.queryData(storeName).then(res => console.log(res));

//条件查询1，这里根据id查询单条数据，与上面的单查区别在于数据结构（上面返回对象，这里返回数组）
idb.queryData(storeName, IDBKeyRange.only(10)).then(res => console.log(res));
idb.queryData(storeName, IDBKeyRange.upperBound(10)).then(res => console.log(res));//条件查询2，id≤10
idb.queryData(storeName, IDBKeyRange.upperBound(10, true)).then(res => console.log(res));//条件查询3，id<10
idb.queryData(storeName, IDBKeyRange.lowerBound(10)).then(res => console.log(res));//条件查询4，id≥10
idb.queryData(storeName, IDBKeyRange.lowerBound(10, true)).then(res => console.log(res));//条件查询5，id>10
idb.queryData(storeName, IDBKeyRange.bound(10, 20)).then(res => console.log(res));//条件查询6，10≤id≤20
idb.queryData(storeName, IDBKeyRange.bound(10, 20, false, true)).then(res => console.log(res));//条件查询7，10≤id<20

//向前遍历，相当于数组结果反转
idb.queryData(storeName, IDBKeyRange.upperBound(10), "prev").then(res => console.log(res));

//根据索引查询。
//注意这里第二个参数是数组格式
//第四个参数即索引可能为联合索引，如“username,phone”，这与对象仓库结构定义有关
//后三个参数是选填的
idb.queryData(storeName, IDBKeyRange.upperBound([13229027016]), "prev", "phone").then(res => console.log(res));

7.分页查询

let storeName = "userStore";
let pageNo = 2;
let pageSize = 10;
idb.queryPage(storeName, pageNo, pageSize).then(res => console.log(res));

queryPage (storeName, pageNo, pageSize, query, direction, indexKeys)后三个参数分别是查询条件IDBKeyRange、遍历方向、索引，非必填的，应用参考“6.查询数据”。

8.查询数量

idb.countData(storeName).then(res => console.log(res));

countData (storeName, query, indexKeys)后两个参数分别是IDBKeyRange、索引，非必填的，应用参考“6.查询数据”。

9.关闭数据库

idb.closeDB();