indexedDB的使用
本文参考资料 @阮一峰博客链接
其他链接:
https://juejin.im/post/5a9d65916fb9a028e46e257a
https://www.codercto.com/a/59264.html
https://www.cnblogs.com/huangenai/p/9766453.html
indexedDB介绍
1.indexedDB是什么?
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。
IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库
2.特点
(1)键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
(2)异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
(3)支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
(4)同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
(5)储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
(6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)
indexDB代码实例
1.概念解析
indexedDB是非关系型数据库,为了便于理解把他和mysql做个对比
数据库:IDBDatabase 对象 //相当于sql数据库
对象仓库:IDBObjectStore 对象 //我把它当作mysql中的一张表
索引: IDBIndex 对象 //当作主键相关的设置
事务: IDBTransaction 对象 //CRUD增删改查
操作请求:IDBRequest 对象 //连接具体某个表
指针: IDBCursor 对象 //利用指针遍历,当作利用一个索引遍历
主键集合:IDBKeyRange 对象
/**
*
* @author {会飞的阿史}
*/
const dbName = "bookData";
const dbVersion = 1 ;
const indexDataBase = {
//indexDB兼容性处理
indexedDB : window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB,
//创建数据库并建立表
async initDB() {
let that = this;
let request = this.indexedDB.open(dbName,dbVersion);
request.onerror = function (event) {
console.log('打开indexDB数据失败!');
console.log(event);
};
request.onsuccess =function (event) {
console.log('打开数据库成功!');
console.log(event);
};
request.onupgradeneeded = function (event) {
console.log('数据库升级事件');
let db = event.target.result;
console.log('数据库中已经存在的表===>',db.objectStoreNames);
//判断表是否已经存在 条件自行更改
if(!db.objectStoreNames.contains('bookTable')){
//创建表并设置主键
var objectStore = db.createObjectStore('bookTable', {keyPath: 'id', autoIncrement: true});
//创建游标索引
objectStore.createIndex('phone', 'phone', {unique: false});
console.log('objectStore',objectStore);
return Promise.resolve(objectStore);
// 删除仓库对象(删除表格)
// db.deleteObjectStore(objectStoreName);
}else {
console.log('数据库已经存在该表');
}
};
},
removeDB: function(dbName){
indexedDB.deleteDatabase(dbName);
console.log('删除数据库成功!');
},
//创建游标索引
createCursorIndex: async function(table, cursorIndex, unique) {
var db = await this.openDB();
let store = db.transaction(table, "readwrite").objectStore(table);
store.createIndex(cursorIndex, cursorIndex, {unique: unique});
return Promise.resolve();
},
//通过索引游标操作数据, callback中要有游标移动方式
handleDataByIndex: async function(table, keyRange, sursorIndex) {
try {
let kRange = keyRange || "";
let db = await this.openDB();
let store = db.transaction(table, "readwrite").objectStore(table),
request;
request = store.index(sursorIndex).openCursor(kRange);
return new Promise(resolve => {
request.onerror = function() {
resolve("通过索引游标获取数据报错");
};
request.onsuccess = function(event) {
let cursor = event.target.result;
if (cursor) {
resolve(cursor);
}
};
});
} catch (error) {
return Promise.reject(error);
}
},
// 表数据操作 通过游标获取数据
handleDataByCursor: async function(table,keyRange){
try {
let kRange = keyRange || "";
let db = await this.openDB();
let store = db.transaction(table, "readwrite").objectStore(table),
request;
request = store.openCursor(kRange);
return new Promise(resolve => {
request.onerror = function() {
resolve("通过游标获取数据报错");
};
request.onsuccess = function(event) {
let cursor = event.target.result;
resolve(cursor);
};
});
} catch (error) {
return Promise.reject(error);
}
},
//打开数据库 利用promise对象设置回调函数解决异步需求
openDB: function () {
return new Promise((resolve,reject) => {
let request = this.indexedDB.open(dbName,dbVersion);
request.onerror = function (event) {
reject("连接数据库失败:" + event);
};
request.onsuccess = function (event) {
resolve(event.target.result);
}
})
},
//删除表
delectDB: function (tableName) {
let request = this.indexedDB.deleteDatabase(tableName);
request.onerror = function (event) {
console.log('删除表发生错误!', event);
return Promise.resolve(false);
};
request.onsuccess = function (event) {
console.log('成功删除表!',event);
return Promise.resolve(true)
}
},
//关闭数据库连接
closeDB: async function(dbName){
try {
if(!dbName){
return {error:'缺少参数'}
}else {
let request = dbName.closeDB();
return new Promise(resolve => {
request.onerror = function () {
console.log('promise对象未发生错误DB响应发生错误!');
resolve(false);
};
request.onsuccess = function () {
console.log('成功关闭数据库连接!')
}
});
}
}catch (e) {
console.log('Try-Catch语句块捕捉到错误!');
return Promise.resolve(false);
}
},
//行数据操作 添加数据库某个表的一条记录
insert: async function(tableName,data) {
try {
let db = await this.openDB();
let request = db
.transaction(tableName, "readwrite")
.objectStore(tableName)
.add(data);
return new Promise((resolve, reject) => {
request.onerror = function() {
reject("添加数据出错");
};
request.onsuccess = function() {
resolve(true);
};
});
} catch (error) {
console.log('Try-Catch语句块捕捉到错误!');
return Promise.resolve(false);
}
},
//行数据操作 更新数据库某个表的一条纪录
update: async function (tableName,data) {
try {
let db = await this.openDB();
let request = db
.transaction(tableName, "readwrite")
.objectStore(tableName)
.put(data);
return new Promise(resolve => {
request.onerror = function() {
resolve(false);
};
request.onsuccess = function() {
resolve(true);
};
});
} catch (error) {
console.log('Try-Catch语句块捕捉到错误!');
return Promise.resolve(false);
}
},
//行数据操作 删除数据库某个表的一条记录
remove: async function(tableName,keyValue){
try {
let db = await this.openDB();
let request = db
.transaction(tableName, "readwrite")
.objectStore(tableName)
.delete(keyValue);
return new Promise(resolve => {
request.onerror = function() {
resolve(false);
};
request.onsuccess = function() {
resolve(true);
};
});
} catch (error) {
console.log('Try-Catch语句块捕捉到错误!');
return Promise.resolve(false);
}
},
//行数据操作 根据主键查找某一条记录
getById: async function(tableName,id){
try {
let db = await this.openDB();
let request = db
.transaction(tableName, "readonly")
.objectStore(tableName)
.get(id); // 这里的“1”也是主键的键值
return new Promise(resolve => {
request.onerror = function () {
resolve(false);
};
request.onsuccess = function () {
resolve(request.result);
};
})
}catch (e) {
console.log('Try-Catch语句块捕捉到错误!');
return Promise.resolve(false);
}
},
//表数据操作 清空数据库某个表的所有记录
clearTable: async function(tableName){
let db = await this.openDB();
let store = db.transaction(tableName,"readwrite").objectStore(tableName);
store.clear();
},
};
export {indexDataBase};