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

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

二：IndexedDBStorage类的创建

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

三：使用方法

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();