indexDB 本地数据库

IndexedDB是一种使用浏览器存储大量数据的方法，它创造的数据可以被查询，并且可以离线使用。

优点：空间大小，大于250M；支持二进制：IndexedDB不但可以存储对象，字符串等，还可以存储二进制数据（文件对象）。

一、indexDB 实现方法

操作包括：创建数据库和创建表、插入数据、根据主键查询数据、根据游标查询所有数据、通过索引查询数据、通过索引和游标查询多条匹配的数据、通过主键删除数据、通过游标和索引删除指定的多条数据、关闭数据库。

//打开数据库(数据库名，和版本号为1)
function openDB(dbName, version) {//返回一个 promise对象，为了实现异步传输（创建promise对象后就会立即执行）return new Promise((resolve, reject) => {//兼容浏览器var indexedDB =window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;let db;//打开数据库，若没有就创建const request = indexedDB.open(dbName, version);//调用数据库打开或创建成功回调函数()request.onsuccess = function (event) {//获取 数据库对象,里面有很多方法（增删改查）db = event.target.result;console.log('数据库打开成功！');//返回数据库对象resolve(db)};//创建或打开数据库失败回调函数request.onerror = function (event) {console.log("数据库打开错误");console.log(event)};//数据库更新回调函数request.onupgradeneeded = function (event) {//数据库创建或升级时触发console.log("")//获取数据库对象db = event.target.result;//创建存储库(存储库名称，对象)-创建表（users表）ObjectStore = db.createObjectStore('userupfile', {//主键,必须唯一keyPath: "fileID"//autoIncrement: true   //实现自增加});//创建索引，在后面查询数据的时候可以根据索引查-创建字段（字段名，索引名，是否唯一：true）//可以通过索引来查询ObjectStore.createIndex('fileID', 'fileID', { unique: true });ObjectStore.createIndex('fileObject', 'fileObject', { unique: false });}})
}//插入数据(数据库对象，表名，插入的数据通常为对象)function addData(db, storeName, data) {var request = db// 事务对象 指定表格名称和操作模式（"只读"或"读写"）.transaction([storeName], "readwrite")// 仓库对象.objectStore(storeName).add(data);//成功回调函数request.onsuccess = function (event) {console.log("数据写入成功");};//失败回调函数request.onerror = function (event) {console.log("数据写入失败");};
}//通过主键查询数据（数据库对象，表名，主键值）function getDataByKey(db, storeName, key) {return new Promise((resolve, reject) => {var transaction = db.transaction([storeName]); // 事务var objectStore = transaction.objectStore(storeName); // 仓库对象var request = objectStore.get(key); // 通过主键获取的查询数据//失败回调函数   request.onerror = function (event) {console.log("事务失败");};//查询成功回调函数request.onsuccess = function (event) {// console.log("主键查询结果: ", request.result);//返回值对应的值resolve(request.result);};});
}//通过游标查询所有数据（数据库对象，表名）function cursorGetData(db, storeName) {let list = [];var store = db.transaction(storeName, "readwrite") // 事务.objectStore(storeName); // 仓库对象//初始化了一个游标对象（指针对象）var request = store.openCursor();//成功回调函数， 游标开启成功，逐行读数据request.onsuccess = function (e) {var cursor = e.target.result;if (cursor) {// 将查询值添加到列表中（游标.value=获取值）list.push(cursor.value);cursor.continue(); // 遍历了存储对象中的所有内容} else {console.log("游标读取的数据：", list);//返回数据resolve(list);}};
}//通过索引查询,查询满足相等条件的第一条数据（数据库对象，表名，索引名字，索引值）function getDataByIndex(db, storeName, indexName, indexValue) {//通过Promise实现异步回调return new Promise((resolve, reject) => {var store = db.transaction(storeName, "readwrite").objectStore(storeName);var request = store.index(indexName).get(indexValue);//查询失败回调函数request.onerror = function () {console.log("查询失败");};//查询成功回调函数request.onsuccess = function (e) {var result = e.target.result;console.log(typeof (result));//返回成功查询数据resolve(result)}});
}//通过索引和游标查询多条匹配的数据（数据库对象，表名，索引名，索引值）function cursorGetDataByIndex(db, storeName, indexName, indexValue) {return new Promise((resolve, reject) => {let list = [];var store = db.transaction(storeName, "readwrite").objectStore(storeName); // 仓库对象var request = store.index(indexName) // 索引对象.openCursor(IDBKeyRange.only(indexValue)); // 指针对象request.onsuccess = function (e) {var cursor = e.target.result;if (cursor) {// 必须要检查list.push(cursor.value);cursor.continue(); // 遍历了存储对象中的所有内容} else {// console.log("游标索引查询结果：", list);resolve(list)}};request.onerror = function (e) { };})}//通过提供的主键值来更新数据，如果主键值不存在，就添加数据（数据库对象，表名，新的数据值）function updateDB(db, storeName, data) {return new Promise((resolve, reject) => {alert('err')var request = db.transaction([storeName], "readwrite") // 事务对象.objectStore(storeName) // 仓库对象.put(data);request.onsuccess = function () {// console.log("数据更新成功");resolve('数据更新成功')};request.onerror = function () {// console.log("数据更新失败");reject('数据更新失败')};})
}//通过主键删除数据（数据库对象，表名，主键值）function deleteDB(db, storeName, id) {return new Promise((resolve,reject)=>{var request = db.transaction([storeName], "readwrite").objectStore(storeName).delete(id);request.onsuccess = function () {//   console.log("数据删除成功");resolve('删除成功！')};request.onerror = function () {//   console.log("数据删除失败");reject('删除失败')};})}//通过游标和索引删除指定的多条数据（数据库对象，表名，索引名，索引值）function cursorDelete(db, storeName, indexName, indexValue) {return new Promise((resolve,reject)=>{var store = db.transaction(storeName, "readwrite").objectStore(storeName);var request = store.index(indexName) // 索引对象.openCursor(IDBKeyRange.only(indexValue)); // 指针对象request.onsuccess = function (e) {var cursor = e.target.result;var deleteRequest;if (cursor) {deleteRequest = cursor.delete(); // 请求删除当前项deleteRequest.onerror = function () {//   console.log("游标删除该记录失败");resolve('删除失败！')};deleteRequest.onsuccess = function () {//   console.log("游标删除该记录成功");reject('删除成功！')};cursor.continue();}};request.onerror = function (e) {};})}//关闭数据库
function closeDB(db) {return new Promise((resolve,reject)=>{db.close();resolve('数据库已关闭')})}

二、调用实现方法

直接在html文件中引入对应上面的JS文件，调用里面的方法，传入对应的参数即可

实践运用中保存的数据示意图

本图为，我自己在实践项目中的保存的数据，并非上面代码实现的效果（数据库名、表名、及其保存数据都有不同）