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.isInit = false;
this.dbName = dbName;
this.version = defaultVersion;
this.dbTable = dbTable;
this.databases = [];
this.initPromise = this.initialization();
}
// initialization
async initialization() {
const database = await this.checkDB({ dbName: this.dbName });
if (window.indexedDB?.databases) {
if (database) {
this.version = database.version;
}
} else {
const version = await new Promise((resolve, reject) => {
const indexedDB = window.indexedDB.open(this.dbName);
indexedDB.onupgradeneeded = (event) => {
console.log("verson indexedDB onupgradeneeded", event);
const db = event.target.result;
const version = db.version;
db.close();
resolve(version);
};
indexedDB.onsuccess = async(event) => {
console.log("verson indexedDB onsuccess", event);
const db = event.target.result;
const version = db.version;
db.close();
resolve(version);
};
indexedDB.onerror = (event) => {
console.log("verson indexedDB onerror", event);
reject();
};
}).catch(err => {
console.log("verson indexedDB error", err);
});
version && (this.version = version);
}
console.log("Initialization completed", database);
this.isInit = true;
}
async initializationWait() {
if (!this.isInit) {
await this.initPromise;
}
}
// Connect to the database
openDB() {
const db = window.indexedDB.open(this.dbName, this.version);
return db;
}
// Get all databases under the browser
async getDBS() {
const res = await window.indexedDB.databases().catch(() => {
return [];
});
this.databases = res;
return res;
}
// Check if the specified database exists
async 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 exists
checkTable({ db, dbTable }) {
const objectStoreNames = db.objectStoreNames;
return objectStoreNames.contains(dbTable);
}
// Data addition method
async add({ db, dbTable, name, value }) {
async function handleAdd(resolve) {
const transaction = db.transaction([dbTable], 'readwrite');
const objectStore = transaction.objectStore(dbTable);
// written as key-value pairs
const 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 method
async get({ db, dbTable, name }) {
return new Promise(resolve => {
const isExistTable = this.checkTable({ db, dbTable });
// Determine whether storage space exists
if (isExistTable) {
// Exist, get and return the specified key value
const 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 storage
async 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 storage
async 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 data
async getItem(config) {
await this.initializationWait();
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 space
if (dbTable) {
// Yes, data acquisition is performed directly in the incoming storage space
const res = await this.get({ db, dbTable, name });
db.close();
return resolve(res);
}
// None, get data in the default storage space
dbTable = 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 data
async setItem(config) {
await this.initializationWait();
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 exists
if (isExistTable) {
// There is a direct add or update
res = 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 database
async removeItem(config) {
await this.initializationWait();
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 exists
if (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 database
async clear(config) {
await this.initializationWait();
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 database
async clearTableItem(config) {
await this.initializationWait();
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、内容说明
注意:都是异步方法;
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" });