aiforge/web_src/js/components/db.js

let db;
let openRequest;
const indexedDB =
    window.indexedDB ||
    window.webkitIndexedDb ||
    window.mozIndexed ||
    window.msIndexedDB;

// transaction 事务处理 意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

// tableList [{tableName,keyPath,indexName}]
/**
 * 初始化数据库
 * @param {string} dbName 数据库名
 * @param {Array} tableList 数据表列表
 */

// 初始化
export function init({ dbName, tableList }) {
    // 存在就打开 不存在新建 第二个参数为db 版本
    openRequest = indexedDB.open(dbName);
    // 新的数据库创建 或者数据库的版本号被更改会被触发
    openRequest.onupgradeneeded = function (e) {
        // 表的创建在这个回调里执行
        const thisDb = e.target.result;
        console.log('running onupgradeneeded' + thisDb);
        if (tableList?.length) {
            tableList.forEach((table) => {
                if (!thisDb.objectStoreNames.contains(table.tableName)) {
                    console.log('I need to create the objectStore');
                    // keyPath 主键 autoIncrement 是否自增
                    const objectStore = thisDb.createObjectStore(table.tableName, {
                        keyPath: table.keyPath,
                        ...table.attr,
                        // autoIncrement: true,
                    });
                    if (table.indexName) {
                        // 创建表的时候 可以去指定那些字段是可以被索引的字段
                        objectStore.createIndex(table.indexName, table.indexName, {
                            unique: table.unique || false,
                        });
                    }
                }
            });
        } else {
            console.error('请传入数据表参数');
        }
    };
    // 已经创建好的数据库创建成功的时候
    openRequest.onsuccess = function (e) {
        db = e.target.result;
        window.db = e.target.result;
        db.onerror = function (event) {
            console.error('Database error: ' + event.target.errorCode);
            console.dir(event.target);
        };
    };
    // 打开失败时调用
    openRequest.onerror = function (e) {
        console.error('openRequest.onerror', e);
    };
}

/**
 * 添加一行
 * @param {string} tableName 表名
 * @param {object} data 数据
 * @returns {promise}
 */
export function add({ tableName, data }) {
    console.log("add:",tableName,data)
    return new Promise((suc, fail) => {
        const request = window.db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName)
            .add(data);

        request.onsuccess = function (event) {
            suc();
            console.log('数据写入成功', event);
        };

        request.onerror = function (event) {
            // fail();
            update({tableName, data })
            console.log('数据写入失败', event);
        };
    });
}

/**
 * 遍历所有数据 其实这里有点坑 真正readAll是下面readAllPC这个方法，因为低版本webview手机不兼容objectStore.getAll所以使用游标来实现
 * @param {string} tableName 表名
 * @returns {promise}
 */
export function readAll(tableName) {
    return new Promise((suc, fail) => {
        const objectStore = db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName);
        // 我这里做的是把所有的结果全部收集起来 当然我们可以做其他事情此处拿到的value是每条数据的结果、还有primaryKey主键、key、与direction
        const result = [];
        objectStore.openCursor().onsuccess = function (event) {
            const cursor = event.target.result;
            if (cursor) {
                result.push({ ...cursor.value });
                cursor.continue();
            } else {
                suc(result);
                console.log('readAll成功==>' , result);
            }
        };
        objectStore.openCursor().onerror = function (event) {
            console.dir(event);
            fail();
        };
    });
}

/**
 * 读取所有数据 仅在pc上或者版本高的手机浏览器中使用 readAllPC这个方法 这个在低版本weview的手机浏览器里面不兼容
 * @param {string} tableName
 * @returns {promise}
 */
export function readAllForHighVersion(tableName) {
    return new Promise((suc, fail) => {
        const objectStore = db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName);
        const request = objectStore.getAll();

        request.onerror = function (event) {
            fail();
            console.log('readAll--->读取表事务失败', event);
        };

        request.onsuccess = function () {
            suc(request.result || []);
        };
    });
}

/**
 * 根据主键查询对应数据
 * @param {string} tableName 表名
 * @param {string} key 主键
 * @returns {promise}
 */
export function readByMainKey({ tableName, key }) {
    return new Promise((suc, fail) => {
        if (!key) {
            fail();
            return;
        }
        const objectStore = db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName);
        const request = objectStore.get(key);

        request.onerror = function (event) {
            console.error('根据主键查询对应数据', event);
            fail();
        };

        request.onsuccess = function () {
            suc(request.result || {});
        };
    });
}

/**
 * 根据主键删除对应数据
 * @param {string} tableName 表名
 * @param {string} key 主键
 * @returns {promise}
 */
export function remove({ tableName, key }) {
    return new Promise((suc, fail) => {
        const objectStore = db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName);
        const request = objectStore.delete(key);

        request.onerror = function (event) {
            console.error('更新失败', event);
            fail();
        };

        request.onsuccess = function (event) {
            console.log('删除成功', event);
            suc();
        };
    });
}

/**
 * 根据主键更新对应数据
 * @param {object} data 对应的主键与值 和 数据
 * @param {string} tableName 表名
 * @returns {promise}
 */
export function update({ tableName, data }) {
    return new Promise((suc, fail) => {
        const objectStore = db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName);
        const request = objectStore.put(data);

        request.onerror = function (event) {
            console.error('更新失败', event);
            fail();
        };

        request.onsuccess = function (event) {
            console.log('更新成功', event);
            suc();
        };
    });
}

/**
 * 通过索引查找对应数据
 * @param {string} indexName 索引名称
 * @param {any} indexVal index 索引值
 * @param {string} tableName 表名
 * @returns {promise}
 */
export function readByIndex({ tableName, indexName, indexVal }) {
    return new Promise((suc, fail) => {
        const objectStore = db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName);
        // 假定新建表格的时候，对name字段建立了索引。
        // objectStore.createIndex('name', 'name', { unique: false });

        const index = objectStore.index(indexName);
        const request = index.get(indexVal);
        request.onerror = function (event) {
            console.log('事务失败', event);
            fail();
        };

        request.onsuccess = function (event) {
            if (request.result) {
                suc(request.result);
            } else {
                console.log('未获得数据记录', event);
            }
        };
    });
}


/**
 * 删除数据库
 * @param {string} DB_NAME 数据库名称
 * @returns
 */
export async function deleteDB(DB_NAME) {
    return indexedDB.deleteDatabase(DB_NAME);
}
/**
 * 关闭数据库
 * @param {string} DB_NAME 数据库名称
 * @returns
 */
export function closeDB(DB_NAME) {
    return indexedDB.close(DB_NAME);
}
/**
 * 清除表
 * @param {string} tableName
 * @returns {promise}
 */
export function clearTable(tableName) {
    return new Promise((suc, fail) => {
        const objectStore = db
            .transaction([tableName], 'readwrite')
            .objectStore(tableName);
        const request = objectStore.clear();

        request.onerror = function (event) {
            console.log('事务失败', event);
            fail();
        };

        request.onsuccess = function (event) {
            console.log('清除成功', event);
            suc();
        };
    });
}

//   export default {
//       deleteDB,
//       updateDB,
//       getDataByKey,
//       addData
//   }