1.前端缓存几种方式: cookie、localStorage、sessionStorage、indexedDB，下面详细介绍indexedDB

2.完整代码

class DBManager {dbName: any = null;version: any = null;db: any = null;/*** 初始化数据库名、版本* @param dbName* @param version*/constructor(dbName: String, version: String | Number) {this.dbName = dbName;this.version = version;this.db = null;}/*** 打开数据库* @param callback* @returns*/openDB(storeName?: String, keyPath?: String, keys?: Array<any>) {return new Promise((resolve, reject) => {if (this.db) {resolve(this.db);} else {const cmd = indexedDB.open(this.dbName, this.version);cmd.onsuccess = (e: any) => {this.db = e.target.result;resolve(this.db);};cmd.onerror = (e: any) => {reject(e.target.error);};cmd.onupgradeneeded = (e: any) => {this.db = e.target.result;this.createStore(storeName, keyPath, keys);};}});}/*** 关闭数据库*/closeDB() {if (this.db) {this.db.close();this.db = null;}}/*** 删除数据库* @returns*/deleteDB() {return new Promise((resolve, reject) => {this.closeDB();const cmd = indexedDB.deleteDatabase(this.dbName);cmd.onsuccess = (e: any) => {resolve("");};cmd.onerror = (e: any) => {reject(e.target.error);};});}/*** 创建对象仓库* @param storeName* @param keyPath* @param keys* @returns*/createStore(storeName?: String, keyPath?: String, keys?: Array<any>) {return new Promise(async (resolve, reject) => {if (this.db) {const store = this.db.createObjectStore(storeName, {keyPath: keyPath,autoIncrement: true,});if (keys) {keys.forEach((key: any) => {store.createIndex(key, key, { unique: key === keyPath ? true : false });});}resolve(this.db);} else {reject("数据库未打开createStore");}});}/*** 增加数据* @param storeName* @param data* @returns*/insert(storeName: String, data: any) {return new Promise((resolve, reject) => {if (this.db) {const transaction = this.db.transaction(storeName, "readwrite");const store = transaction.objectStore(storeName);const cmd = store.add(data);cmd.onsuccess = (e: any) => {resolve(e.target.result);};cmd.onerror = (e: any) => {reject(e.target.error);};} else {reject("数据库未打开");}});}/*** 查询数据，默认根据主键查询* @param storeName* @param value* @returns*/queryByKey(storeName: String, value: any) {return new Promise((resolve, reject) => {if (this.db) {const transaction = this.db.transaction(storeName, "readonly");const store = transaction.objectStore(storeName);const cmd = store.get(value);cmd.onsuccess = (e: any) => {resolve(e.target.result);};cmd.onerror = (e: any) => {reject(e.target.error);};} else {reject("数据库未打开");}});}/*** 查询全部数据记录* @param storeName* @returns*/queryAll(storeName: String) {return new Promise((resolve, reject) => {if (this.db) {const transaction = this.db.transaction(storeName, "readonly");const store = transaction.objectStore(storeName);const cmd = store.getAll();cmd.onsuccess = (e: any) => {resolve(e.target.result);};cmd.onerror = (e: any) => {reject(e.target.error);};} else {reject("数据库未打开");}});}/*** 通过游标查询,跟queryByIndex的区别是：游标查询可定义查询条件，比如年龄在18-24之间的数据* @param storeName* @param range 查询条件* @param direction 排序顺序* @returns*/queryByCursor(storeName: String, key?: String, range?: any, direction: String = "next") {return new Promise((resolve, reject) => {if (this.db) {const transaction = this.db.transaction(storeName, "readonly");const store = transaction.objectStore(storeName);const index = key ? store.index(key) : "";const cursor = range ? index.openCursor(range, direction) : store.openCursor();const result: Array<any> = [];cursor.onsuccess = (e: any) => {const cursor = e.target.result;if (cursor) {result.push(cursor.value);cursor.continue();}resolve(result);};cursor.onerror = (e: any) => {reject(e.target.error);};} else {reject("数据库未打开");}});}/*** 通过键值对查询* @param storeName* @param indexName* @param value* @returns 获取：键为indexName，值为value 的那条数据*/queryByIndex(storeName: String, indexName: String, value: any) {return new Promise((resolve, reject) => {if (this.db) {const transaction = this.db.transaction(storeName, "readonly");const store = transaction.objectStore(storeName);const cmd = store.index(indexName).get(value);cmd.onsuccess = (e: any) => {resolve(e.target.result);};cmd.onerror = (e: any) => {reject(e.target.error);};} else {reject("数据库未打开");}});}/*** 更新数据* @param storeName* @param key* @param data* @returns*/update(storeName: String, key: String, newData: any) {return new Promise((resolve, reject) => {if (this.db) {const transaction = this.db.transaction(storeName, "readwrite");const store = transaction.objectStore(storeName);const cmd = store.get(key);cmd.onsuccess = (e: any) => {let data = e.target.result;Object.assign(data, newData);const requestUpdate = store.put(data);requestUpdate.onsuccess = (e: any) => {resolve(e.target.result);};requestUpdate.onerror = (e: any) => {reject(e.target.error);};};cmd.onerror = (e: any) => {reject(e.target.error);};} else {reject("数据库未打开");}});}/*** 删除数据* @param storeName* @param key* @returns*/delete(storeName: String, key: String) {return new Promise((resolve, reject) => {if (this.db) {const transaction = this.db.transaction(storeName, "readwrite");const store = transaction.objectStore(storeName);const cmd = store.delete(key);cmd.onsuccess = (e: any) => {resolve(e.target.result);};cmd.onerror = (e: any) => {reject(e.target.error);};} else {reject("数据库未打开");}});}
}
export default DBManager;

3.在项目中使用

template:<button @click="learnDb('open')">打开</button><button @click="learnDb('add')">添加</button><button @click="learnDb('search')">查询</button><button @click="learnDb('delete')">删除</button><button @click="learnDb('update')">更新</button><button @click="learnDb('close')">关闭</button><button @click="learnDb('clearn')">清除</button>script://学习indexedDB
let myDB = new DBManager("zhengjie", 1);
let learnDb = async (type: String) => {if (type == "clearn") {myDB.deleteDB();} else if (type == "open") {myDB.openDB("users", "name", ["name", "age"]);} else if (type == "add") {myDB.insert("users", { name: "整洁", age: 18 });} else if (type == "search") {// let a = await myDB.queryByKey("users", "整洁");// let a = await myDB.queryAll("users");// const range = IDBKeyRange.only(24);// let a = await myDB.queryByCursor("users", "age", range); //查询名字(name)为整洁的数据let a = await myDB.queryByIndex("users", "age", 24);console.log("查找数据", a);} else if (type == "delete") {myDB.delete("users", "整洁");} else if (type == "update") {myDB.update("users", "整洁", { name: "整洁", age: 24 });} else if (type == "close") {myDB.closeDB();}
};