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’

image-20230222092026

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

  1. 第一个参数,索引的名称。
  2. 第二个参数,指定根据存储数据的哪一个属性来构建索引。
  3. 第三个属性, options对象,其中属性unique的值为true表示不允许索引值相等。
// 创建该对象仓库属性的索引
if(indexs && indexs.length > 0) {
    indexs.map(function(i: string) {
        store.createIndex(i, i, { unique: false })
    })
}

目前还没理解有什么用…

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐