当前位置：首页 > news >正文

indexedDB前端数据库存储使用

news 来源：原创 2025/6/22 12:27:45

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）必须先打开数据库，必须使用异步方法