本文主要是介绍IndexDB封装，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
理论知识
/*** 打开/创建数据库* @param {object} dbName 数据库的名字* @param {string} storeName 仓库名称* @param {string} version 数据库的版本* @param {string} keyPath 主键键值，不传就自动创建主键* @param {Array} index 索引数组* @return {object} 该函数会返回一个数据库实例*/
type StoreOptions = {autoIncrement: boolean;keyPath?: string;
};
const openDB = function (dbName: string,version: number,storeName: string,keyPath?: string,index?: Array<any[]> | undefined
) {return new Promise((resolve, reject) => {// 兼容浏览器// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-ignoreconst { webkitIndexedDB, indexedDB, mozIndexedDB, msIndexedDB } = window;const indexDB = indexedDB || mozIndexedDB || webkitIndexedDB || msIndexedDB;let db = null;const request = indexDB.open(dbName, version);// 操作成功request.onsuccess = function (event: any) {db = event?.target?.result; // 数据库对象resolve({ code: 0, success: true, data: db, msg: "数据库打开成功!" });};// 操作失败request.onerror = function (e: any) {resolve({ code: -1, success: false, data: e, msg: "数据库打开失败!" });};// 创建表和索引request.onupgradeneeded = function (event: any) {// 数据库创建或升级的时候会触发db = event?.target?.result; // 数据库对象const storeOptions: StoreOptions = {autoIncrement: true,};if (keyPath && keyPath !== "") {storeOptions.autoIncrement = false;storeOptions.keyPath = keyPath;}// 创建表if (!db.objectStoreNames.contains(storeName)) {const store = db.createObjectStore(storeName, storeOptions);// 创建索引// indexName索引列名称// indexKey索引键值if (index && index.length > 0) {index.forEach((item: any) => {if (!item.indexName ||!item.indexKey ||item.options.unique === undefined) {window.indexedDB.deleteDatabase(dbName);reject("索引格式错误，请参照格式{indexName:'indexName',indexKey:'indexKey',options:{unique: false}}");}store.createIndex(item.indexName, item.indexKey, item.options);});}}};});
};/*** 新增数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {object} dataConfig 添加的数据集合**/
const addData = function (db: any, storeName: string, dataConfig: any) {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}const req = db.transaction([storeName], "readwrite").objectStore(storeName) // 仓库对象.add(dataConfig);// 操作成功req.onsuccess = function () {resolve({ code: 0, success: true, data: null, msg: "数据写入成功!" });};// 操作失败req.onerror = function (e: any) {const data = {code: -1,success: false,data: e,msg: "数据写入失败!",};resolve(data);};});
};/*** 更新数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {object} dataConfig 更新的数据集合*/
const updateData = function (db: any,storeName: string,dataConfig: any,keyPath: any
) {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}const req = db.transaction([storeName], "readwrite").objectStore(storeName).put(dataConfig, keyPath);// 操作成功req.onsuccess = function () {resolve({ code: 0, success: true, data: null, msg: "数据更新成功!" });};// 操作失败req.onerror = function (e: any) {const data = {code: -1,success: false,data: e,msg: "数据更新失败!",};resolve(data);};});
};/*** 删除数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} key 数据主键**/
const deleteData = function (db: any, storeName: string, key: any) {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}const req = db.transaction([storeName], "readwrite").objectStore(storeName) // 仓库对象.delete(key);// 操作成功req.onsuccess = function (e: { target: { result: any } }) {resolve({code: 0,success: true,data: e?.target?.result,msg: "数据删除成功!",});};// 操作失败req.onerror = function () {const data = {code: -1,success: false,data: null,msg: "数据删除失败!",};resolve(data);};});
};/*** 查询数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} key 数据主键**/
const getDataByKey = function (db: any, storeName: string, key: any) {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}const req = db.transaction([storeName], "readonly").objectStore(storeName) // 仓库对象.get(key);// 操作成功req.onsuccess = function (e: any) {resolve({code: 0,success: true,data: e?.target?.result,msg: "数据获取成功!",});};// 操作失败req.onerror = function (e: any) {const data = {code: -1,success: false,data: e,msg: "数据获取失败!",};resolve(data);};});
};/*** 使用游标查询数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称**/
const getDataByCursor = (db: any, storeName: any) => {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}const list: any = [];const req = db.transaction(storeName, "readonly") // 事务.objectStore(storeName) // 仓库对象.openCursor(); // 指针对象req.onsuccess = function (e: any) {const cursor = e.target.result;if (cursor) {// 必须要检查list.push(cursor.value);cursor.continue(); // 遍历了存储对象中的所有内容} else {const data = {code: 0,success: true,data: list,msg: "数据获取成功!",};resolve(data);}};req.onerror = function (e: any) {const data = {code: -1,success: false,data: e,msg: "数据获取失败!",};resolve(data);};});
};/*** 通过索引读取数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} key 数据主键**/
const getDataByIndex = function (db: any,storeName: any,indexName: any,indexValue: any
) {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}const req = db.transaction([storeName], "readonly").objectStore(storeName) // 仓库对象.index(indexName).get(indexValue);// 操作成功req.onsuccess = function (e: { target: { result: any } }) {resolve({code: 0,success: true,data: e?.target?.result,msg: "数据获取成功!",});};// 操作失败req.onerror = function (e: any) {const data = {code: -1,success: false,data: e,msg: "数据获取失败!",};resolve(data);};});
};/*** 通过索引和游标查询记录* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} key 数据主键**/
export function getDataBYCursorAndIndex(db: any,storeName: any,indexName: any,indexValue: any
) {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}const list: any = [];const req = db.transaction(storeName, "readonly").objectStore(storeName) // 仓库对象.index(indexName) // 索引对象.openCursor(IDBKeyRange.only(indexValue)); // 指针对象req.onsuccess = function (e: any) {const cursor = e.target.result;if (cursor) {// 必须要检查list.push(cursor.value);cursor.continue(); // 遍历了存储对象中的所有内容} else {const data = {code: 0,success: true,data: list,msg: "数据获取成功!",};resolve(data);}};req.onerror = function (e: any) {const data = {code: -1,success: false,data: e,msg: "数据获取失败!",};resolve(data);};});
}
/*** 关闭数据库*/
export function closeDB(db: any) {return new Promise((resolve, reject) => {if (!db) {reject("数据库不存在或没有初始化");}db.close();});
}
export default {openDB,addData,updateData,deleteData,getDataByKey,getDataByCursor,getDataByIndex,getDataBYCursorAndIndex,closeDB,
};这篇关于IndexDB封装的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
