indexDB在vue项目中的应用

ndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然Web Storage在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。（1）Indexed DB：索引数据库，操作简便，目前主流浏览器正努力实现对index DB的支

慢性子

5444人浏览 · 2021-03-19 17:53:58

慢性子 · 2021-03-19 17:53:58 发布

ndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

（1）Indexed DB：
索引数据库，操作简便，目前主流浏览器正努力实现对index DB的支持。
Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了Web Storage（Local Storage和Session Storage）与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。
（2）indexDB主要对象介绍：
• IDBFactory：打开数据库的工厂对象，用于打开数据库，并管理数据库版本。
• IDBOpenDBRequest：请求对象，对数据库的访问、操作都是基于请求的，通过请求对象获取其他DOM对象。
• IDBDatabase：数据库对象，封装了对数据库表的创建、编辑等功能。
• IDBObjectStore：类似于数据库的数据表。
• IDBIndex：数据库索引对象，用于创建数据表的索引。
• IDBTransaction：数据库事物控制对象。
• IDBCursor：数据库访问游标，用于访问数据。
（3）异步API
在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式，比如打开数据库的操作
var request=window.indexedDB.open('testDB');
这条指令并不会返回一个DB对象的句柄，我们得到的是一个IDBOpenDBRequest对象，而我们希望得到的DB对象在其result属性中，

这条指令请求的响应是一个 IDBDatabase对象，这就是IndexedDB对象，

除了result，IDBOpenDBRequest接口定义了几个重要属性
• onerror: 请求失败的回调函数句柄
• onsuccess:请求成功的回调函数句柄
• onupgradeneeded:请求数据库版本变化句柄

所谓异步API是指并不是这条指令执行完毕，我们就可以使用request.result来获取indexedDB对象了，就像使用ajax一样，语句执行完并不代表已经获取到了对象，所以我们一般在其回调函数中处理。

开始使用

新建indexDb.js，封装增删改

import Vue from 'vue';

let local = {
save(key, value) {
if (typeof value === 'string') {
localStorage.setItem(key, value);
} else {
localStorage.setItem(key, JSON.stringify(value));
}

fetch(key) {

return JSON.parse(localStorage.getItem(key)) || {}

del(key) {
if (key) {
localStorage.removeItem(key);
} else {
localStorage.clear();
}

}

}
// 用来获取和设置删除 indexDB 存储
let myDB = {
name: "yancao",
version: 0,
db: null,
ojstore: [{
name: "goods", //商品表
keyObj: {
keyPath: "goods_id",
autoIncrement: true
}, //自增主键
creatIndex: [{
keyname: 'goods_isn',
keyPath: 'goods_isn',
unique: true
}, {
keyname: 'bitcode',
keyPath: 'bitcode',
unique: true
}, {
keyname: 'is_tobacco',
keyPath: 'is_tobacco',
}, {
keyname: 'is_active',
keyPath: 'is_active'
},
{
keyname: 'keywords', //关键字搜索
keyPath: ['goods_isn', 'goods_name', 'shortalpha']
},
]
},
{
name: "canOrderInfo", //可定量商品信息表
keyObj: {
keyPath: "category_code",
autoIncrement: false
}, //自增主键
creatIndex: [
{
keyname: 'can_order_index',
keyPath: 'can_order_index',
unique: true
}
]
},
{
name: "goodscategory_info", //类别表
keyObj: {
keyPath: "category_code",
autoIncrement: false
}, //自增主键
creatIndex: [{
keyname: 'category_code',
keyPath: 'category_code',
unique: true
},
{
keyname: 'category_name',
keyPath: 'category_name',
unique: true
}, {
keyname: 'order_index',
keyPath: 'order_index',
unique: true
}
]
},
{
name: "stores", //类别表
keyObj: {
keyPath: "store_id",
autoIncrement: true
}, //自增主键
creatIndex: [{
keyname: 'goods_isn',
keyPath: 'goods_isn',
unique: true
},
{
keyname: 'unit_uuid',
keyPath: 'unit_uuid'
}, {
keyname: 'quantity',
keyPath: 'quantity'
}
]
},
{
name: "orders", //订单表
keyObj: {
keyPath: "id",
autoIncrement: true
}, //自增主键
creatIndex: [{
keyname: 'order_id',
keyPath: 'order_id',
unique: true
},{
keyname: 'pay_type', //支付类型
keyPath: 'pay_type'
}, {
keyname: 'state',
keyPath: 'state', //订单支付状态 0 未支付(待支付) 1 已支付 2 支付异常 3 订单关闭
},
{
keyname: 'upstate',
keyPath: 'upstate', //订单状态是否已上送 0 未上送 1 已上送
},
{
keyname: 'searchKey',
keyPath: ['upstate', 'state'], //根据订单状态和支付状态建立索引
},
{
keyname: 'fund_channel', //支付通道
keyPath: 'fund_channel',
}
]
}
]
};
let indexDB = {
indexedDB: window.indexedDB || window.webkitindexedDB,
IDBKeyRange: window.IDBKeyRange || window.webkitIDBKeyRange, //键范围
openDB: function(myDB, callback) {
//建立或打开数据库，建立对象存储空间(ObjectStore)
var self = this;
var version = myDB.version || 1;
var request = self.indexedDB.open(myDB.name, version);
request.onerror = function(e) {

};

request.onsuccess = function(e) {
myDB.db = e.target.result;

callback(e.target.result);
};

request.onupgradeneeded = function(e) {
var db = e.target.result,
transaction = e.target.transaction,
store;
myDB.ojstore.forEach(function(storeObj) {
if (!db.objectStoreNames.contains(storeObj.name)) {
//没有该对象空间时创建该对象空间
store = db.createObjectStore(storeObj.name, storeObj.keyObj);
if (storeObj.creatIndex.length > 0) { //如果有多个索引
storeObj.creatIndex.forEach(function(item) {
if (item.unique) {
store.createIndex(item.keyname, item.keyPath, {
unique: item.unique
});
} else {

store.createIndex(item.keyname, item.keyPath,{
unique: false
});
}

})
}

}
})

}

deletedb: function(dbname, callback) {
//删除数据库
var deleteQuest = this.indexedDB.deleteDatabase(dbname);
deleteQuest.onerror = function(result) {
console.log('删除数据库出错');
callback(result);
};
deleteQuest.onsuccess = function(result) {
console.log(dbname + '数据库已删除')
if (callback && (typeof callback === 'function')) {
callback(result);
}
}
},

closeDB: function(db) {

//关闭数据库

db.close();
console.log('数据库已关闭')

addData: function(db, storename, data, callback) {
//添加数据，重复添加会报错
var self = this;
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
let addTime = new Date()+'';
if (data.length) {

for (var i = 0; i < data.length; i++) {
data[i].addTime = addTime;
let modData = data[i];
request = store.add(modData);
request.onerror = function(err) {

err.respcode='0001';
callback(err);
self.putData(db, storename, modData);
};
request.onsuccess = function(resp) {

resp.respcode='0000';
callback(resp);
};
}
}

},
//根据key修改更新时间
updateDataByKey: function(db, storeName, value, QTY, addtime) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value);
return new Promise((resolve, reject) => {
request.onsuccess = function(e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty = QTY;
stocktable.addtime = addtime;
resolve(store.put(stocktable));
} else {
reject(false);
}

};

})

},
//根据key修改数量
updateDataByKeys: function(db, storeName, value, addtime, callback) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(value);
return new Promise((resolve, reject) => {
//console.log(addtime)
request.onsuccess = function(e) {
var stocktable = e.target.result;
if (stocktable) {
stocktable.qty += 1;
stocktable.addtime = addtime;
resolve(store.put(stocktable));
} else {
reject(false);
}
};
})
},

//通过游标遍历数据
getdatabycursor: function(db, storename) {
var objectStore = db.transaction(storename).objectStore(storename);
var dataList = [];
var i = 0;
return new Promise((resolve, reject) => {
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
dataList.push(cursor.value)
cursor.continue();
} else {
resolve(dataList);
}
};
})
},
getGoodsByMatchCursor: function(db,storename,str) { //根据游标模糊查询goods
var objectStore = db.transaction(storename).objectStore(storename);
var dataList = [];
var i = 0;
return new Promise((resolve, reject) => {
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if(cursor){
if(cursor.value.bitcode.indexOf(str)!= -1||cursor.value.goods_name.indexOf(str)!= -1||cursor.value.shortalpha.indexOf(str)!= -1){
dataList.push(cursor.value);
}
cursor.continue();
} else {
resolve(dataList);
}
};
})
},
//根据key查询数量是否存在
getqtyBykey: function(db, storeName, key) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var request = objectStore.get(key);
request.onerror = function(event) {
console.log('事务失败');
};
return new Promise((resolve, reject) => {
request.onsuccess = function(event) {
if (request.result) {
//console.log(request.result.qty)
resolve(request.result);
} else {
resolve(false);
}
};
})
},
//根据游标索引值类型查找数据
getCusorBykey: function(db, storeName, searchkey, value1, searchtype, value2, callback) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);
var index = objectStore.index(searchkey);
if (value1) {
// 仅匹配 value
var KeyRange;
switch (searchtype) {
case 'lowerBound': //// 匹配所有超过value的，但不包括value
KeyRange = IDBKeyRange.lowerBound(value, true);
break;
case 'upperBound': //// 匹配所有不超过value的，但不包括value
KeyRange = IDBKeyRange.upperBound(value, true);
break;
case 'boundTrue': //匹配所有在value1和value2之间的，但不包括value1和value2
KeyRange = IDBKeyRange.bound(value1, value2, true, true);
break;
case 'boundFalse': //匹配所有在value1和value2之间的，但包括value1和value2
KeyRange = IDBKeyRange.bound(value1, value2, false, false);
break;
default:
KeyRange = IDBKeyRange.only(value1);
}
var data = [];
index.openCursor(KeyRange).onsuccess = function(event) {
var cursor = event.target.result;

if (cursor) {
// cursor.key 是一个 name, 就像 "Bill", 然后 cursor.value 是整个对象。
data.push(cursor.value);
cursor.continue();
} else {
callback(data);
}
};
}

},
// 通过索引获取数据
read: function(db, storeName, searchIndex, indexValue) {
var transaction = db.transaction(storeName);
var objectStore = transaction.objectStore(storeName);

var indexs = objectStore.index(searchIndex);
// 根据索引searchIndex找到紧仅匹配值为indexValue的数据
var request = indexs.openCursor(IDBKeyRange.only(indexValue));
// var request=indexs.get(indexValue);
return new Promise((resolve, reject) => {
request.onsuccess = function(e) {
var cursor = e.target.result;
if (cursor) {

resolve(cursor);
} else {
resolve(false);
}
}
})
},

//更新单条数据
putData: function(db, storename, data, callback) {
//添加数据，重复添加会更新原有数据
let updatetime = new Date() + '';
if (data) {
var modData = data;
modData.updatetime = updatetime;
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request = store.put(modData);
request.onerror = function(err) {
console.log('put err',err);
};
request.onsuccess = function() {

};

}

},
//更新多条数据
putDatas: function(db, storename, data, callback) {
//添加数据，重复添加会更新原有数据
let updatetime = new Date();
let _this = this;
////根据游标取出所有数据
this.getdatabycursor(db, storename).then(arr => {
if (arr.length == 0) { //数据库为空
console.log("全部添加")
var store = db.transaction(storename, 'readwrite').objectStore(storename),
request;
for (var i = 0, len = dataArr.length; i < len; i++) {
request = store.add(dataArr[i]);
request.onerror = function() {

};
request.onsuccess = function(result) {
if (callback && (typeof callback === 'function')) {
callback(result);
}
};
}
} else { //数据库中有数据
for (var i = 0, len = data.length; i < len; i++) {
//查找是否有相同数据，有更新，无添加
this.read(db, storename, 'id', data[i].id).then(x => {

if (x) {
_this.putData(db, storename, data[i]);
} else {
console.log("再次添加")
_this.addData(db, storename, data[i]);
}
})
}
}
})

getAllData(db, storename, callback) {

//获取所有数据
var store = db.transaction(storename, 'readwrite').objectStore(storename);
var allRecords = store.getAll();
allRecords.onsuccess = function() {

if (typeof(callback) === 'function') {
callback(allRecords.result);
}
};
},
//根据key查找到数据
getDataByKey: function(db, storename, key, callback) {
//根据存储空间的键找到对应数据
var store = db.transaction(storename, 'readwrite').objectStore(storename);
var request = store.get(key);
request.onerror = function() {
console.log('getDataByKey error');
};

request.onsuccess = function(e) {
var result = e.target.result;
console.log('查找数据成功', result)
if (typeof(callback) === 'function') {
callback(result);

}
};
},

deleteData: function(db, storename, key) {
//删除某一条记录
var store = store = db.transaction(storename, 'readwrite').objectStore(storename);
store.delete(key);
console.log('已删除存储空间' + storename + '中' + key + '记录');
},

clearData: function(db, storename) {
var self = this;
var version = myDB.version || 1;
const request = self.indexedDB.open(db, version);
request.addEventListener('success', e => {
var sdb=e.target.result;
console.log('db',sdb);
var store = sdb.transaction(storename, 'readwrite').objectStore(storename);
store.clear();
});

}

export default {
install: function(Vue) {
Vue.prototype.$local = local;
Vue.prototype.$myDB = myDB;
Vue.prototype.$indexDB = indexDB;
}
}

//其他应用

//****************添加数据****************************;

// this.$indexDB.addData(myDB.db, myDB.ojstore.name, cartData);

// ****************获取所有数据****************************;

// this.$indexDB.getAllData(myDB.db, myDB.ojstore.name);

//*******************put重复添加*************************;

// this.$indexDB.putData(myDB.db,myDB.ojstore.name,cartData);

//*******************获取指定数据*************************";

// this.$indexDB.getDataByKey(

// myDB.db,

// myDB.ojstore.name,

// cartData[0].id

// );

//******************删除数据1001************;

// this.$indexDB.deleteData(myDB.db,myDB.ojstore.name,1001);

//******************删除全部数据************;

// this.$indexDB.clearData(myDB.db,myDB.ojstore.name);

//******************关闭数据库************;

// this.$indexDB.closeDB(myDB.db);

全局封装调用global.vue

} else {
console.log('查询本地数据库 storename',storename);
indexDb.getAllData(myDB.db, storename, function(data) {
console.log('查询出的数据！', data);
callback(data);
});
}
});
}

};

export default {
IndexDbControl

}

项目成功运行后

浏览器调试中