Vue3项目之IndexedDB 数据存储方案（二）

IndexedDB 数据存储方案

2、数据库与对象仓库的创建

在 utils 文件夹下新建 indexedDB.ts

export default class IndexedDB {
    private dbName: string
    private db: any // 数据库实例

    constructor(dbName: string) {
        this.dbName = dbName
    }

    // 打开数据库 参数：对象仓库名称、主键、索引数组（可选） 
    openStore(storeName: string, keyPath: string, indexs?: Array<string>) {
        let request = window.indexedDB.open(this.dbName, 2) // 名称 版本号（不可回退）

        // 数据库打开成功的回调
        request.onsuccess = (e) => {
            console.log('数据库打开成功')
            console.log(e);
            
            // 赋值数据库实例
            this.db = e.target.result   
        }

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

        // 数据库更新成功的回调
        request.onupgradeneeded = function (e) {
            console.log('数据库更新成功')
            const { result } = e.target   

            // 创建对象仓库（传入仓库名和主键名，主键设置为递增）
            const store = result.createObjectStore(storeName, {
                autoIncrement: true, keyPath
            })

            // 创建该对象仓库属性的索引
            if(indexs && indexs.length > 0) {
                indexs.map(function(i: string) {
                    store.createIndex(i, i, { unique: true })
                })
            }

            // 对象仓库创建成功的回调
            store.transaction.oncomplete = function(e) {
                console.log('对象仓库创建成功');
                console.log(e);
            }
        }
        
    }
}

实例化数据库：1、创建数据库 2、打开对象仓库

import IndexedDB from '@/utils/indexedDB'

// 创建数据库
const airbnDB = new IndexedDB('airbnDB')
airbnDB.openStore('room','id', ['hose', 'shu'])

仓库名为 ‘room’，主键命名为 ‘id’

单独理解一下：createIndex能够给当前的存储空间设置一个索引。它接受三个参数

1. 第一个参数，索引的名称。
2. 第二个参数，指定根据存储数据的哪一个属性来构建索引。
3. 第三个属性， options对象，其中属性unique的值为true表示不允许索引值相等。

// 创建该对象仓库属性的索引
if(indexs && indexs.length > 0) {
    indexs.map(function(i: string) {
        store.createIndex(i, i, { unique: false })
    })
}

目前还没理解有什么用…