做网站的人网站优化平台

2025.04.02，今天我学习了如何使用indexedDB前端数据库，这个比localStorage的存储量更大，可以让前端有缓存数据的页面更快渲染，在这里我封装了一个js方法，

一、封装组件IndexDBCache.js：

可以直接复制使用，主要包括两个字段name为存储的名称，value为存储的值

export class IndexDBCache {constructor() {this.db = null;}// 创建数据库open_indexedDB = (dbName, storeName) => {return new Promise((resolve, reject) => {const request = indexedDB.open(dbName, 1); // 打开数据库，版本号设置为1// 数据库首次创建时或版本升级时会触发request.onupgradeneeded = (event) => {this.db = event.target.result;// 如果数据库中没有这个对象存储，则创建它if (!this.db.objectStoreNames.contains(storeName)) {const store = this.db.createObjectStore(storeName, {keyPath: 'name'}); // 使用 'name' 作为主键store.createIndex('treeIndex', 'value'); // 为 'value' 字段创建索引}};// 数据库打开成功request.onsuccess = (event) => {this.db = event.target.result; // 确保成功后赋值resolve(this.db);};// 打开失败request.onerror = (event) => {reject('数据库打开失败: ' + event.target.errorCode);};});};// 保存数据到数据库save_indexedDB = (storeName, name, value) => {if (!this.db) {return Promise.reject('数据库尚未打开');}return new Promise((resolve, reject) => {const transaction = this.db.transaction(storeName, 'readwrite'); // 以读写模式打开事务const store = transaction.objectStore(storeName);const request = store.put({name: name, value: value}); // 插入或更新数据request.onsuccess = () => {resolve('数据保存成功');};request.onerror = (event) => {reject('数据保存失败: ' + event.target.errorCode || event.target.error);};});};// 从数据库中获取数据get_indexedDB = (storeName, name) => {if (!this.db) {return Promise.reject('数据库尚未打开');}return new Promise((resolve, reject) => {const transaction = this.db.transaction(storeName, 'readonly'); // 以只读模式打开事务const store = transaction.objectStore(storeName);const request = store.get(name); // 根据name获取数据request.onsuccess = (event) => {resolve(event.target.result); // 返回获取到的结果};request.onerror = (event) => {reject('获取数据失败: ' + event.target.errorCode || event.target.error);};});};// 删除数据库中的数据delete_indexedDB = (storeName, name) => {if (!this.db) {return Promise.reject('数据库尚未打开');}return new Promise((resolve, reject) => {const transaction = this.db.transaction(storeName, 'readwrite');const store = transaction.objectStore(storeName);const request = store.delete(name); // 根据name删除数据request.onsuccess = () => {resolve('数据删除成功');};request.onerror = (event) => {reject('数据删除失败: ' + event.target.errorCode || event.target.error);};});};
}

二、页面使用：

（1）必须先打开数据库，必须使用异步方法

let indexedDB = new IndexDBCache();//构建方法

await  indexedDB.open_indexedDB('数据库xxxx','表xxxx');//第一个为数据库名称，第二个为表名称

（2）插入数据

注意：数据量大的话还是需要转成json存储

 await indexedDB.save_indexedDB('表xxxx','主键名称xxx','{name:'11',age:20}');//第一个为需要插入到对应的表，第二个为主键名称，第三个为插入的数值

（3）查询数据

 await indexedDB.get_indexedDB('表xxxx','主键名称xxx');//第一个为需要查询的表名称，第二个为查询的主键名称

（4）删除数据

await indexedDB.delete_indexedDB('表xxxx','主键名称xxx');//第一个为需要查询的表名称，第二个为删除的主键名称

比较麻烦的是需要把使用到indexedDB地方的方法都改成异步处理。