一：场景 - 客户端数据持久化

我的场景：资源超出localStorage最大存储容量，资源通过后台获取响应时间较长

二：IndexedDBStorage类的创建

javascript">class IndexedDBStorage {constructor(dbName, storeName, version = 1) {this.dbName = dbName; // 数据库名称this.storeName = storeName; // 对象存储名称this.db = null; // 数据库实例// 打开或创建数据库const request = indexedDB.open(dbName, version);request.onupgradeneeded = (event) => {const db = event.target.result;if (!db.objectStoreNames.contains(storeName)) {const store = db.createObjectStore(storeName, { keyPath: "id", autoIncrement: true });store.createIndex("name", "name", { unique: true }); // 创建 name 索引}};request.onsuccess = (event) => {this.db = event.target.result;console.log("数据库初始化成功");};request.onerror = (event) => {console.error("数据库初始化失败", event);};}// 存储数据（更新或插入）setItem(name, value) {if (!this.db) {console.error("数据库未初始化");return;}const transaction = this.db.transaction([this.storeName], "readwrite");const store = transaction.objectStore(this.storeName);const index = store.index("name"); // 获取 name 索引// 先查找是否存在相同 name 的数据const getRequest = index.get(name);getRequest.onsuccess = () => {const existingData = getRequest.result;if (existingData) {// 如果存在，更新数据const updateRequest = store.put({ id: existingData.id, name, value });updateRequest.onsuccess = () => {console.log("数据更新成功");};updateRequest.onerror = (event) => {console.error("数据更新失败", event);};} else {// 如果不存在，插入新数据const addRequest = store.add({ name, value });addRequest.onsuccess = () => {console.log("数据插入成功");};addRequest.onerror = (event) => {console.error("数据插入失败", event);};}};getRequest.onerror = (event) => {console.error("查找数据失败", event);};}// 获取数据getItem(name) {if (!this.db) {console.error("数据库未初始化");return;}return new Promise((resolve, reject) => {const transaction = this.db.transaction([this.storeName], "readonly"); // 创建只读事务const store = transaction.objectStore(this.storeName); // 获取对象存储const index = store.index("name"); // 获取 name 索引const request = index.get(name); // 通过 name 查找数据request.onsuccess = () => {if (request.result) {resolve(request.result.value); // 返回找到的数据} else {resolve(null); // 未找到数据}};request.onerror = (event) => {reject(event); // 捕获错误并返回};});}// 删除数据removeItem(name) {if (!this.db) {console.error("数据库未初始化");return;}const transaction = this.db.transaction([this.storeName], "readwrite");const store = transaction.objectStore(this.storeName);const index = store.index("name");const request = index.openCursor(IDBKeyRange.only(name));request.onsuccess = (event) => {const cursor = event.target.result;if (cursor) {cursor.delete();console.log("数据删除成功");} else {console.log("未找到对应的数据");}};request.onerror = (event) => {console.error("数据删除失败", event);};}// 清空对象存储clear() {if (!this.db) {console.error("数据库未初始化");return;}const transaction = this.db.transaction([this.storeName], "readwrite");const store = transaction.objectStore(this.storeName);const request = store.clear();request.onsuccess = () => {console.log("对象存储清空成功");};request.onerror = (event) => {console.error("对象存储清空失败", event);};}
}export default IndexedDBStorage

三：使用方法

javascript">this.myOutside = new IndexedDBStorage("MyDatabase", "MyObjectStore");  // 数据库名称，数据表名
//getItem
this.myOutside.getItem("name").then((value) => {})
//setItem
this.myOutside.setItem("name", 'yd');
//removeItem
this.myOutside.removeItem("name");
//clear
this.myOutside.clear();