localForage封装
indexedDB
当前端本地存储量比较大的时候会想到 indexedDB,indexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象)。
优点:
- 存取方便:使用 webStorage 存储对象或数组的时候,还需要先经过先序列化为字符串,取值的时候需要经过反序列化,那 indexedDB 就比较完美的解决了这个问题,可以轻松存取对象或数组等结构化克隆算法支持的任何对象。
- 异步存取:indexedDB 的读取和存储都是异步的,不会阻塞浏览器进程。
- 庞大的存储量:一般可达到500M,甚至没有上限。
localForage
localForage 是基于 indexedDB 封装的库,通过它我们可以简化 indexedDB 的使用。
对于浏览器的兼容问题,它有一个优雅降级策略,若浏览器不支持 indexedDB 则使用 WebSQL ,如果不支持 WebSQL 则使用 localStorage。
localForage 的使用
import localforage from 'localforage'
// 创建
const myIndexedDB = localforage.createInstance({
name: 'myIndexedDB',
})
// 存
myIndexedDB.setItem(key, value)
// 取
myIndexedDB.getItem('somekey').then(function (value) {
// we got our value
}).catch(function (err) {
// we got an error
});
try {
const value = await myIndexedDB.getItem('somekey');
// This code runs once the value has been loaded
// from the offline store.
console.log(value);
} catch (err) {
// This code runs if there were any errors.
console.log(err);
}
// 删除
myIndexedDB.removeItem('somekey')
// 重置
myIndexedDB.clear()
localForage 的封装
import localForage from 'localforage';
export class Storage {
private db: LocalForage;
constructor(storeName = 'xxx') {
this.db = localForage.createInstance({
name: ProductCodeEnum.XXX,
storeName,
description: 'storage for xxx',
});
}
private getKey(key: string): string {
return [key, projectCode, userEmail].join('-');
}
getStorage() {
return this.db;
}
getItem(key: string) {
return this.getStorage().getItem(this.getKey(key));
}
setItem(key: string, value: unknown) {
return this.getStorage().setItem(this.getKey(key), value);
}
removeItem(key: string) {
return this.getStorage().removeItem(this.getKey(key));
}
}
export const xxxStorage = new Storage('xxx');