浏览器indexDB增删改查操作封装实现

前言：

最近使用，记下来方便以后查看

代码实现：

/**
 * @description TODO indexDB 存储数据库初始化
 * @param dbName 数据库名称
 * @param storeItem 存储对象名称
 * @param keyPath   键路径
 * @return Promise
 * @author Albert_Luo@lizipro.cn
 * @date 2024/10/12 9:30
 */
function initIndexedDB(dbName,storeItem,keyPath) {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, 1);

        request.onupgradeneeded = function(event) {
            const db = event.target.result;
            db.createObjectStore(storeItem, { keyPath: keyPath, autoIncrement: true });
        };

        request.onsuccess = function(event) {
            resolve(event.target.result);
        };

        request.onerror = function(event) {
            reject(event.target.error);
        };
    });
}
/**
 * @description TODO indexDB 保存数据
 * @param dbName 数据库名称
 * @param storeItem 存储对象名称
 * @param data   值
 * @param storeId   键
 * @return Promise
 * @author Albert_Luo@lizipro.cn
 * @date 2024/10/12 9:50
 */
function saveToIndexedDB(dbName,data,storeItem,storeId) {
    return initIndexedDB(dbName,storeItem,"id").then(db => {
        return new Promise((resolve, reject) => {
            const transaction = db.transaction([storeItem], 'readwrite');
            const store = transaction.objectStore(storeItem);
            // 使用固定的键值 storeId
            const request = store.put({ id: storeId, data });

            request.onsuccess = function() {
                resolve();
            };

            request.onerror = function(event) {
                reject(event.target.error);
            };
        });
    });
}

function getFromIndexedDB(dbName,storeItem,storeId) {
    return initIndexedDB(dbName,storeItem,"id").then(db => {
        return new Promise((resolve, reject) => {
            const transaction = db.transaction([storeItem], 'readonly');
            const store = transaction.objectStore(storeItem);
            // 使用的键值 storeId
            const request = store.get(storeId);

            request.onsuccess = function(event) {
                resolve(event.target.result);
            };

            request.onerror = function(event) {
                reject(event.target.error);
            };
        });
    });
}

调用示例：

//保存
saveToIndexedDB(systemPath,url,"stuUrl","stuUrl");

//获取
getFromIndexedDB(systemPath,"stuEntranceFlag","stuId").then(item=>{

});

eg: