前端数据量超大时使用indexDB缓存

首先我们知道localstorage、sessionstorage和cookie存数据时都是有大小限制的，其次因为项目中使用的是pinia，经过测试后也无法缓存5M以上的数据。

那么当数据量很大时我们如何缓存呢？indexDB。

废话不多说，直接上代码：

export default class DB {
	dbName: string
	db: any
	constructor(name: string) {
		this.dbName = name
	}

	open(storeName: string, keyPath: string, indexs?: Array<string>) {
		if (!window.indexedDB) {
			return alert('您的浏览器不支持该app，为了更好的体验，请使用新版chrome浏览器')
		}
		const request = window.indexedDB.open(this.dbName, 1)
		return new Promise((resolve, rej) => {
			request.onerror = (e: any) => {
				this.onmessage({ type: '数据库连接失败', message: e })
				rej()
			}
			request.onsuccess = (e: any) => {
				this.db = e.target.result
				this.onmessage({ type: '数据库连接成功', message: '' })
				resolve()
			}
			request.onupgradeneeded = (e: any) => {
				const db = e.target.result
				if (!db.objectStoreNames.contains(storeName)) {
					const store = db.createObjectStore(storeName, { autoIncrement: true, keyPath })
					if (indexs && indexs.length) {
						indexs.map((v) => {
							store.createIndex(v, v, { unique: false })
						})
					}
					store.transaction.oncomplete = (ev: any) => {
						this.onmessage({ type: '创建对象仓库成功', message: '' })
					}
				}
			}
		})
	}

	onmessage(msg: MsgProps) {
		console.log(msg.type, msg.message)
	}

	update(storeName: string, data: object) {
		const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName)
		return new Promise((resolve, rej) => {
			const request = store.put({
				...data,
				lastModify: new Date().getTime()
			})
			request.onsuccess = (e: any) => {
				this.onmessage({
					type: '更新成功',
					message: data
				})
				resolve()
			}
			request.onerror = (e: any) => {
				this.onmessage({
					type: '更新失败',
					message: data
				})
				rej()
			}
		})
	}

	add(storeName: string, data: object) {
		const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName)
		return new Promise((resolve, rej) => {
			const request = store.add({
				...data,
				lastModify: new Date().getTime()
			})
			request.onsuccess = (e: any) => {
				this.onmessage({
					type: '添加成功',
					message: data
				})
				resolve()
			}
			request.onerror = (e: any) => {
				this.onmessage({
					type: '添加失败',
					message: data
				})
				rej()
			}
		})
	}

	getList(storeName: string) {
		const store = this.db.transaction([storeName]).objectStore(storeName)
		return new Promise((resolve, rej) => {
			store.getAll().onsuccess = (e: any) => {
				const res = e.target.result
				this.onmessage({
					type: '获取列表成功',
					message: res
				})
				resolve(res)
			}
		})
	}

	delete(storeName: string, key: string) {
		const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName)
		const request = store.delete(key)
		return new Promise((resolve, rej) => {
			request.onsuccess = (e: any) => {
				this.onmessage({
					type: '删除成功',
					message: key
				})
				resolve()
			}
			request.onerror = (e: any) => {
				this.onmessage({
					type: '删除失败',
					message: data
				})
				rej()
			}
		})
	}

	closeDB() {
		this.db.close()
	}

	deleteDB() {
		indexedDB.deleteDatabase(this.dbName)
	}
}

以上是封装了DB的方法，下面是如何使用：

// 链接数据库
let indexddb = new DB('test')
indexddb.open('test', 'test_data')

// 添加数据
indexddb.add('test', {a: 1})
// 获取数据
indexddb.getList('test').then((res: any) => {
	console.log(res)
})

// 删除数据(key是获取数据时返回的id)
indexddb.delete('test', key)