Skip to content
On this page

indexedDB 使用说明

对于一些数据量大,并且不经常改变的数据,为解决数据传输慢、页面加载时间长,建议采用indexedDB(浏览器自带的数据库,数据存储在本地磁盘中,理论上来讲只要磁盘有空间,就可以无限存储。)

数据库封装后使用

ts
/**
     * 手动创建数据库,默认会根据传入的参数自动创建一个数据库
     * createDB: () => void
     * 
     * 删除数据库
     * deleteDB: (dbName: string) => void
     * 
     * 清除指定仓库的数据
     * clearStore:(storeName: string) => Promise
     * 
     * 在指定的仓库里添加数据
     * addModel:(storeName: string, data: Recordable) => Promise
     * 
     * 更新数据,如果传入数组对象,则批量更新
     * updateModel:(storeName: string, data: Recordable | Recordable[] ) => Promise
     * 
     * 获取仓库数据,不传获取所有数据,如果传入数组id,则批量获取指定的数据
     * getModel:(storeName: string, ids?: string | string[]) => Recordable[]
     * 
     * 根据id删除数据仓库数据,如果传入数组id,则批量删除
     * deleteModel:(storeName: string, ids?: string | string[]) => Promise
     */
    const { createDB, deleteDB, clearStore, addModel, updateModel, getModel, deleteModel } = useIndexedDB({
		config: {
			dbName: '测试数据库',
			version: 1
		},
		stores: {
			module: {
				id: 'id',
				index: {
					name: true
				},
				isClear: false
			}
		}
	})

参数配置

ts
export type dbOptions = {
    // 基础配置
    config: {
        dbName: string  // 数据库名称
        version: number // 数据库版本
    },

    // 仓库配置
    stores: {
        // 模块名称
        [moduleName: string]: {
            id: string
            isClear: boolean // 是否删除历史仓库数据
            index: {}   // 需要建立的索引值
        }
    }
}