1、封装一个indexedDB的使用类库（CreateDB）

// business database
const dbMap = {defaultDBName: "local_basic_db"
};// Database default storage space (database table)
let defaultDBTable = "basic_table";
// default database version
let defaultVersion = 1;class CreateDB {constructor (config = {}) {let dbName = config?.dbName || dbMap.defaultDBName;let dbTable = config?.dbTable || defaultDBTable;this.dbName = dbName;this.version = defaultVersion;this.dbTable = dbTable;this.databases = [];this.initialization();}// initializationasync initialization() {const database = await this.checkDB({ dbName: this.dbName });if (database) {this.version = database.version;}console.log("Initialization completed", database);}// Connect to the databaseopenDB() {const db = window.indexedDB.open(this.dbName, this.version);return db;}// Get all databases under the browserasync getDBS() {const res = await window.indexedDB.databases().catch(() => {return [];});this.databases = res;return res;}// Check if the specified database existsasync checkDB({ dbName }) {if (dbName) {const databaseList = await this.getDBS();if (databaseList.length) {let database;for (let i = 0; i < databaseList.length; i++) {let curr = databaseList[i];if (curr.name === dbName) {database = curr;break;}}return database;}}return null;}// Check if the storage space existscheckTable({ db, dbTable }) {const objectStoreNames = db.objectStoreNames;return objectStoreNames.contains(dbTable);}// Data addition methodasync add({ db, dbTable, name, value }) {async function handleAdd(resolve) {const transaction = db.transaction([dbTable], 'readwrite');const objectStore = transaction.objectStore(dbTable);// written as key-value pairsconst updateRequest = objectStore.put(value, name);updateRequest.onsuccess = (event) => {console.log("Data set successfully", event);resolve(true);};updateRequest.onerror = (event) => {console.log("Data setting failed", event);resolve();};};return new Promise(resolve => handleAdd(resolve)).catch(err => {console.log("Data setting error", err);return false;});}// Data acquisition methodasync get({ db, dbTable, name }) {return new Promise(resolve => {const isExistTable = this.checkTable({ db, dbTable });// Determine whether storage space existsif (isExistTable) {// Exist, get and return the specified key valueconst transaction = db.transaction([dbTable], 'readonly');const objectStore = transaction.objectStore(dbTable);const getRequest = objectStore.get(name);getRequest.onsuccess = (event) => {console.log("Data obtained successfully", event);const data = event.target.result;resolve(data);};getRequest.onerror = (event) => {console.log("Data acquisition failed", event);resolve();};} else {resolve();}}).catch(err => {console.log("Data acquisition error", err);});}// add storageasync addDBTable({ dbTable, name, value }) {return new Promise((resolve, reject) => {this.version = this.version + 1;const indexedDB = this.openDB();indexedDB.onupgradeneeded = (event) => {console.log("add table indexedDB onupgradeneeded", event);const db = event.target.result;if (!db.objectStoreNames.contains(dbTable)) {db.createObjectStore(dbTable);}};indexedDB.onsuccess = async (event) => {console.log("add table indexedDB onsuccess", event);const db = event.target.result;this.version = db.version;const res = await this.add({ db, dbTable, name, value });db.close();resolve(res); };indexedDB.onerror = (event) => {console.log("add table indexedDB onerror", event);const db = event.target.result;this.version = db.version;reject();};}).catch(err => {console.log("add table indexedDB error", err);return false;});}// clear storageasync clearDBTable({ dbTable }) {return new Promise((resolve, reject) => {this.version = this.version + 1;const indexedDB = this.openDB();indexedDB.onupgradeneeded = (event) => {console.log("clear table indexedDB onupgradeneeded", event);const db = event.target.result;if (db.objectStoreNames.contains(dbTable)) {db.deleteObjectStore(dbTable);}};indexedDB.onsuccess = async (event) => {console.log("clear table indexedDB onsuccess", event);const db = event.target.result;this.version = db.version;db.close();resolve(true); };indexedDB.onerror = (event) => {console.log("clear table indexedDB onerror", event);const db = event.target.result;this.version = db.version;reject();};}).catch(err => {console.log("clear table indexedDB error", err);return false;});}// retrieve dataasync getItem(config) {return new Promise((resolve, reject) => {const { name,dbTable: incomingDBTable} = config || {};const indexedDB = this.openDB();indexedDB.onsuccess = async (event) => {console.log("get indexedDB onsuccess", event);const db = event.target.result;let dbTable = incomingDBTable;// Determine whether there is incoming storage spaceif (dbTable) {// Yes, data acquisition is performed directly in the incoming storage spaceconst res = await this.get({ db, dbTable, name });db.close();return resolve(res);}// None, get data in the default storage spacedbTable = this.dbTable;const res = await this.get({ db, dbTable, name });db.close();resolve(res);}indexedDB.onerror = (event) => {console.log("get indexedDB onerror", event);reject();}}).catch(err => {console.log("get indexedDB error", err);});}// Add/update dataasync setItem(config) {return new Promise((resolve, reject) => {const { name,value,dbTable: incomingDBTable} = config || {};const indexedDB = this.openDB();const dbTable = incomingDBTable || this.dbTable;indexedDB.onsuccess = async (event) => {console.log("set indexedDB onsuccess", event);const db = event.target.result;const isExistTable = this.checkTable({ db, dbTable });let res;// Determine whether the specified storage space existsif (isExistTable) {// There is a direct add or updateres = await this.add({ db, dbTable, name, value });db.close();} else {db.close();res = await this.addDBTable({ dbTable, name, value });}resolve(res);}indexedDB.onerror = (event) => {console.log("set indexedDB onerror", event);reject();}}).catch(err => {console.log("set indexedDB error", err);return false;});}// Clear the specified data in the specified storage space under the databaseasync removeItem(config) {return new Promise((resolve, reject) => {const { name,dbTable: incomingDBTable} = config || {};const indexedDB = this.openDB();const dbTable = incomingDBTable || this.dbTable;indexedDB.onsuccess = (event) => {console.log("remove indexedDB onsuccess", event);const db = event.target.result;const isExistTable = this.checkTable({ db, dbTable });// Determine whether the specified storage space existsif (isExistTable) {const deleteTransaction = db.transaction([dbTable], 'readwrite');const deleteObjectStore = deleteTransaction.objectStore(dbTable);const deleteRequest = deleteObjectStore.delete(name);deleteRequest.onsuccess = (event) => {console.log("Data removed successfully", event);db.close();resolve(true);};deleteRequest.onerror = (event) => {console.log("Data removal failed", event);db.close();resolve(false);};} else {db.close();resolve(true);}}indexedDB.onerror = (event) => {console.log("remove indexedDB onerror", event);reject();}}).catch(err => {console.log("remove indexedDB error", err);return false;});}// Clear all data in the specified storage space under the databaseasync clear(config) {return new Promise((resolve, reject) => {const { dbTable: incomingDBTable} = config || {};const indexedDB = this.openDB();const dbTable = incomingDBTable || this.dbTable;indexedDB.onsuccess = (event) => {console.log("clear indexedDB onsuccess", event);const db = event.target.result;const isExistTable = this.checkTable({ db, dbTable });if (isExistTable) {const transaction = db.transaction([dbTable], 'readwrite');const objectStore = transaction.objectStore(dbTable);const cursorRequest = objectStore.openCursor();cursorRequest.onsuccess = (event) => {let cursor = event.target.result;if (cursor) {cursor.delete();cursor.continue();}};cursorRequest.onerror = (event) => {console.log("Data clearing failed", event);db.close();resolve(false);};transaction.oncomplete = (event) => {console.log("Data cleared successfully", event);db.close();resolve(true);};transaction.onerror = (event) => {console.log("Data clearing transaction succeeded", event);db.close();resolve(false);};} else {db.close();resolve(true);}}indexedDB.onerror = (event) => {console.log("clear indexedDB onerror", event);reject();}}).catch(err => {console.log("clear indexedDB error", err);return false;});}// Clear the specified storage space under the databaseasync clearTableItem(config) {return new Promise((resolve, reject) => {const { dbTable: incomingDBTable} = config || {};const indexedDB = this.openDB();const dbTable = incomingDBTable || this.dbTable;indexedDB.onsuccess = async (event) => {console.log("clear table indexedDB onsuccess", event);const db = event.target.result;const isExistTable = this.checkTable({ db, dbTable });if (isExistTable) {db.close();const res = await this.clearDBTable({ dbTable });resolve(res);} else {db.close();resolve(true);}}indexedDB.onerror = (event) => {console.log("clear table indexedDB onerror", event);reject();}}).catch(err => {console.log("clear table indexedDB error", err);return false;});}
}export { CreateDB };
export { dbMap };export default {CreateDB,dbMap
};

2、内容说明

• dbMap：用来记录存储数据库的名称，放在此处集中管理数据的名称；
• defaultDBTable：每个数据库默认的存储空间（相当于默认表）；
• defaultVersion：每个数据库默认的版本（都是从1开始）；
• CreateDB：给予传入的数据库名称、存储空间，生成一个数据库的对象，用来操作该数据库。不传入，就都是用默认值；
• initialization：在new一个数据库的实例是，会自动执行的初始化方法。主要是用来检查当下浏览器的数据库中是否存在构造的数据库，如果存在，则记录该数据库的当下版本，以便之后连接数据库时使用；
• openDB：连接数据库；
• getDBS：获取浏览器当下存在的数据库；
• checkDB：检查浏览器是否存在构造的数据库；
• checkTable：在构造的数据库中，检查是否存在指定的存储空间；
• add：以键值对的形式添加数据；
• get：通过键获取数据；
• addDBTable：添加存储空间；
• clearDBTable：移除某个存储空间；
• getItem：用来获取数据（对外实际使用的数据操作方法）；
• setItem：添加或是更新数据（对外实际使用的数据操作方法）；
• removeItem：移除数据（对外实际使用的数据操作方法）；
• clear：移除某个存储空间下的所有数据（对外实际使用的数据操作方法）；
• clearTableItem：移除某个存储空间（对外实际使用的数据操作方法）；

注意：都是异步方法；

3、使用

const currDB = new CreateDB();
// 或是：const currDB = new CreateDB({ dbName: dbMap.defaultDBName });// 获取
currDB.getItem({ name: "key" });
// 添加或更新
currDB.setItem({ name: "key", value: 123456 });
// 移除
currDB.removeItem({ name: "key" });
// 清除某个存储空间下的所有数据
currDB.clear({ dbTable: "dbTable" });
// 清除某个存储空间
currDB.clearTableItem({ dbTable: "dbTable" });