IndexedDB 数据存储方案

3、对象仓库增删改查操作

通过操作数据库实例 this.db 搭配其内部属性 transaction 事务函数

indexedDB.ts 中的类 indexedDB 里面添加这些函数

1、增加、修改数据 put

// 新增、修改对象仓库数据  参数：仓库名、数据
updateItem(storeName: string, data: any) {
    // 打开对象仓库
    const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName)

    // 仓库写入数据 updateTime：使数据唯一化
    let request = store.put({
        ...data, updateTime: new Date().getTime()
    })

    // 写入成功的回调
    request.onsuccess = function(e) {
        console.log('数据写入成功');
    }

    // 写入失败的回调
    request.onerror = function (e) {
        console.log('数据写入失败');
    }
}

在实例中增加、修改属性 单个数据也必须用对象形式

// 增加属性
airbnDB.updateItem(storeName, {name: 'cocoon', age: 18})

// 修改属性（通过主键修改）
airbnDB.updateItem(storeName, {id: 1, name: 'czy', age: 21})

主键（id）也会按递增顺序加入数据中

2、删除数据 delete

deleteItem(storeName: string, keyPath: string | number) {
    // 打开对象仓库
    const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName)

    let request = store.delete(keyPath)

    request.onsuccess = function (e) {
        console.log('数据删除成功');
    }

    request.onerror = function (e) {
        console.log('数据删除失败');
    }
}

airbnDB.deleteItem(storeName, 2)

3、查询数据 get

返回值用到了 Promise 对象，那么调用的时候必须用 async/await

// 查询所有数据
getList(storeName: string) {
    const store = this.db.transaction(storeName).objectStore(storeName)

    const request = store.getAll()

    // 返回异步函数结果
    return new Promise((resolve, reject) => {
        request.onsuccess = (event: any) => {
            console.log('查询所有数据成功')

            // 成功得到数据并返回
            resolve(event.target.result) // 成功态
        }

        request.onerror = (event: any) => {
            console.log('查询所有数据失败')

            // 返回失败结果
            reject(event) // 失败态
        }
    })
}

// 查询单条数据
getItem(storeName: string, key: number | string) {
    const store = this.db.transaction(storeName).objectStore(storeName)

    const request = store.get(key)

    // 返回异步函数结果
    return new Promise((resolve, reject) => {
        request.onsuccess = (event: any) => {
            console.log('查询某一条数据成功')

            // 成功得到数据并返回
            resolve(event.target.result) // 成功态
        }

        request.onerror = (event: any) => {
            console.log('查询某一条数据失败')

            // 返回失败结果
            reject(event) // 失败态
        }
    })
}

实际调用：

async function check(storeName: string) {
    let result = await airbnDB.getList(storeName)

    console.log(result); // 成功态获得数据  失败态获得 event 对象   
}