IndexedDB是浏览器自带的web数据库，作用相同于缓存，相比于本地缓存存储大小无限制，下面我将其封装为key-value的形式方便使用。
IndexedDB可存储js支持的任何类型
辅助方法
//辅助方法-这个没什么用，只是统一处理打印
notify(msg, value) {
console.log(msg);
if (value) console.log(value);
},
初始化
//初始化 数据库打开/创建
initDB() {
let request = indexedDB.open("myDB");
request.onerror = event => {
this.notify("数据库打开/创建失败:", event);
};
//如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。
//升级后自动触发success
request.onupgradeneeded = event => {
let db = event.target.result;
this.db = db;
//建表 名为person,主键为id
let store = db.createObjectStore("person", {
keyPath: "key"
});
//新建索引名称、索引所在的属性、配置对象
store.createIndex("key", "key", {
unique: true //（说明该属性是否值是否唯一）
});
};
request.onsuccess = event => {
this.db = event.target.result;
this.notify("数据库打开/创建成功", event);
};
},
新增（key,obj）
//新增 ----- {key,{value1,value2......}}
addDB(key, obj = {}) {
if (key) {
// 建立读写事务,向对象仓库写入数据记录
let request = this.db
.transaction(["person"], "readwrite")
.objectStore("person")
.add({
key: key,
value: obj
});
request.onsuccess = event => {
this.notify("新增成功", key);
};
request.onerror = event => {
this.notify("重复数据写入失败", key);
};
}
},
按key查询
//按 key 查询数据 返回 value(obj)
getDB(key) {
if (key) {
var transaction = this.db.transaction(["person"]);
let objectStore = transaction.objectStore("person");
let res;
// 遍历数据库
objectStore.openCursor().onsuccess = event => {
let cursor = event.target.result;
if (cursor) {
let data = cursor.value;
if (data.key === key) {
res = data.value;
this.notify(res);
}
cursor.continue();
}
};
}
},
查询全部
//查询全部
getListDB() {
var transaction = this.db.transaction(["person"]);
let objectStore = transaction.objectStore("person");
let list = [];
// 遍历数据库
objectStore.openCursor().onsuccess = event => {
let cursor = event.target.result;
if (cursor) {
list.push(cursor.value); //此value非彼value
cursor.continue();
} else {
this.notify(list);
}
};
},
按key修改
//修改 按key修改
setDB(key, obj) {
if (key) {
let request = this.db
.transaction(["person"], "readwrite")
.objectStore("person")
.put({
key: key,
value: obj
});
request.onsuccess = event => {
this.notify("数据更新成功");
};
request.onerror = event => {
this.notify("数据更新失败");
};
}
},
按key删除
//删除 按key删除
delDB(id) {
if (id) {
var request = this.db
.transaction(["person"], "readwrite")
.objectStore("person");
let dle = request.delete(id);
dle.onsuccess = event => {
this.notify("删除成功");
};
dle.onerror = event => {
this.notify("删除失败");
};
}
},
