localForage封装代码

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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35