localStorage容量太小？使用localforage进行大容量的存储

localStorage是前端存储数据的一种方式，，但是其容量一般在5M-10M左右，用来缓存一些间的数据基本够用，但毕竟定位也不是大数据量的存储

浏览器其实有提供大数据量的本地存储的，比如： IndexedDB，IndexDB存储数据大小一般在250M以上，弥补了localStorage容量的缺陷，我们可以通过localforage来进行大数据量的本地存储，使用起来也很方便，其中的API和localStorage基本类似，几乎没有学习成本

1. 简述

npm官方：https://www.npmjs.com/package/localforage

localforage中文文档：https://localforage.docschina.org/#api-config

localforage 拥有类似 localStorage API，使用也很方便，几乎没有学习成本，它能存储多种类型的数据如 Array、 ArrayBuffer、 Blob、 Number、 Object、 String，而不仅仅是字符串。

这意味着我们可以直接存对象、数组类型的数据避免了 JSON.stringify 转换数据的一些问题。

存储其他数据类型时需要转换成上边对应的类型，比如vue3中使用 reactive 定义的数据需要使用toRaw 转换成原始数据进行保存， ref 则直接保存 xxx.value 数据即可。

2. 安装

npm i localforage
or
pnpm add localforage

3. 使用

提供了与 localStorage 相同的api，不同的是它是异步的调用返回一个 Promise 对象

可以按需引入，也可以引入之后挂载到全局使用

import localforage from 'localforage'

① 存储数据

方式一：异步调用返回Promise（then）

localforage.setItem(key, value).then(val => {
  console.log(val, '存储成功')
}).catch(e => {
  console.error(e, '出错')
})

方式二：回调版本

localforage.setItem(key, value, (err, val) => {
  if(!err) {
    console.log(val, '存储成功')
  } else {
    console.log(err, '出错')
  }
})

方式三：可以使用 async/await 的方式

try {
  let val = await localforage.setItem(key, value)
} catch(e) {
  console.log(e, '出错')
}

② 获取数据

同样的也是和上面方式差不多，将setItem 换成 getItem就可以了

// 根据数据的 key 获取数据 没有则返回 null
localforage.getItem(key).then(value => {
  // 当离线仓库中的值被载入时，此处代码运行
  obj.value = value  // value就是取出来的值
}).catch(err => {
  console.error(err, '取值出错')
})

// 回调版本：
localforage.getItem(key, (err, value) => {
  // 当离线仓库中的值被载入时，此处代码运行
  if(!err) {
    obj.value = value  // value就是取出来的值
  }
})

③ 删除数据

也是同样的

localforage.removeItem('obj').then(() => {
  console.log('删除成功');
}).catch(err => {
  console.error(err, '删除失败')
})

// 回调版本：
localforage.removeItem('obj', (err) => {
  if(!err) {
    console.log('删除成功')
  } else {
    console.error(err, '删除失败')
  }
})

④ 其他方法

length 获取key的数量
key 根据key的索引获取其名
keys 获取数据仓库中所有的key
iterate 迭代数据仓库中的所有的 value/key 键值对

4. 配置

localforage.config({ name: 'My-localStorage' }); 设置仓库的名字，不同的名字代表不同的仓库，当一个应用需要多个本地仓库隔离数据的时候就很有用。

const store = localforage.createInstance({
    name: "nameHere"
});

const otherStore = localforage.createInstance({
    name: "otherName"
});

// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
store.setItem("key", "value");
otherStore.setItem("key", "value2");

同时也支持删除仓库

// 调用时，若不传参，将删除当前实例的 “数据仓库” 。
localforage.dropInstance().then(function() {
  console.log('Dropped the store of the current instance').
});

// 调用时，若参数为一个指定了 name 和 storeName 属性的对象，会删除指定的 “数据仓库”。
localforage.dropInstance({
  name: "otherName",
  storeName: "otherStore"
}).then(function() {
  console.log('Dropped otherStore').
});

// 调用时，若参数为一个仅指定了 name 属性的对象，将删除指定的 “数据库”（及其所有数据仓库）。
localforage.dropInstance({
  name: "otherName"
}).then(function() {
  console.log('Dropped otherName database').
});

除了本文介绍的localforage外还有idb-keyval（idb-keyval是用IndexedDB实现的一个超级简单的基于 promise 的键值存储。）等库也是可以的

但是我更喜欢本文的 localforage 毕竟学习成本更低一些，跟localStorage中的API 很是类似。

秒客网