弥补localStorage容量缺陷方法详解

时间:2022-11-08 唐诗人气:0

正文

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

在某些场景下 localStorage 的容量就会有点捉襟见肘，其实浏览器是有提供大数据量的本地存储的如 IndexedDB 存储数据大小一般在 250M 以上。

弥补了localStorage容量的缺陷，但是使用要比localStorage复杂一些 mdn IndexedDB

不过已经有大佬造了轮子封装了一些调用过程使其使用相对简单，下面我们一起来看一下

localforage

localforage 拥有类似 localStorage API，它能存储多种类型的数据如 Array ArrayBuffer Blob Number Object String，而不仅仅是字符串。

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

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

安装

下载最新版本或使用 npm bower 进行安装使用。

# 引入下载的 localforage 即可使用
<script src="localforage.js"></script>
<script>console.log('localforage is: ', localforage);</script>
# 通过 npm 安装：
npm install localforage
# 或通过 bower：
bower install localforage

使用

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

localforage.getItem('somekey').then(function(value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});
// 回调版本：
localforage.getItem('somekey', function(err, value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
});

提供的方法有

getItem 根据数据的 key 获取数据差不多返回 null

setItem 根据数据的 key 设置数据（存储undefined时getItem获取会返回 null）

removeItem 根据key删除数据

length 获取key的数量

key 根据 key 的索引获取其名

keys 获取数据仓库中所有的 key。

iterate 迭代数据仓库中的所有 value/key 键值对。

配置

完整配置可查看文档这里说个作者觉得有用的

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').
});

idb-keyval

idb-keyval是用IndexedDB实现的一个超级简单的基于 promise 的键值存储。

安装

npm

npm install idb-keyval

// 全部引入
import idbKeyval from 'idb-keyval';
idbKeyval.set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));
// 按需引入会摇树
import { get, set } from 'idb-keyval';
set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));
get('hello').then((val) => console.log(val));

浏览器直接引入 <script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js"></script>

暴露的全局变量是 idbKeyval 直接使用即可。

提供的方法

由于其没有中文的官网，会把例子及自己的理解附上

set 设置数据

值可以是数字、数组、对象、日期、Blobs等，尽管老Edge不支持null。

键可以是数字、字符串、日期，（IDB也允许这些值的数组，但IE不支持）。

import { set } from 'idb-keyval';
set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

setMany 设置多个数据

一个设置多个值，比一个一个的设置更快

import { set, setMany } from 'idb-keyval';
// 不应该:
Promise.all([set(123, 456), set('hello', 'world')])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));
// 这样做更快:
setMany([
  [123, 456],
  ['hello', 'world'],
])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

get 获取数据

如果没有键，那么val将返回undefined的。

import { get } from 'idb-keyval';
// logs: "world"
get('hello').then((val) => console.log(val));

getMany 获取多个数据

一次获取多个数据，比一个一个获取数据更快

import { get, getMany } from 'idb-keyval';
// 不应该:
Promise.all([get(123), get('hello')]).then(([firstVal, secondVal]) =>
  console.log(firstVal, secondVal),
);
// 这样做更快:
getMany([123, 'hello']).then(([firstVal, secondVal]) =>
  console.log(firstVal, secondVal),
);

del 删除数据

根据 key 删除数据

import { del } from 'idb-keyval';
del('hello');

delMany 删除多个数据

一次删除多个键，比一个一个删除要快

import { del, delMany } from 'idb-keyval';
// 不应该:
Promise.all([del(123), del('hello')])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));
// 这样做更快:
delMany([123, 'hello'])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

update 排队更新数据，防止由于异步导致数据更新问题

因为 get 与 set 都是异步的使用他们来更新数据可能会存在问题如：

// Don't do this:
import { get, set } from 'idb-keyval';
get('counter').then((val) =>
  set('counter', (val || 0) + 1);
);
get('counter').then((val) =>
  set('counter', (val || 0) + 1);
);

上述代码我们期望的是 2 但实际结果是 1，我们可以在第一个回调执行第二次操作。

更好的方法是使用 update 来更新数据

// Instead:
import { update } from 'idb-keyval';
update('counter', (val) => (val || 0) + 1);
update('counter', (val) => (val || 0) + 1);

将自动排队更新，所以第一次更新将计数器设置为1，第二次更新将其设置为2。

clear 清除所有数据

import { clear } from 'idb-keyval';
clear();

entries 返回 `[key, value]` 形式的数据

import { entries } from 'idb-keyval';
// logs: [[123, 456], ['hello', 'world']]
entries().then((entries) => console.log(entries));

keys 获取所有数据的 `key`

import { keys } from 'idb-keyval';
// logs: [123, 'hello']
keys().then((keys) => console.log(keys));

values 获取所有数据 `value`

import { values } from 'idb-keyval';
// logs: [456, 'world']
values().then((values) => console.log(values));

createStore 自定义仓库

文字解释：表 === store === 商店一个意思

// 自定义数据库名称及表名称
// 创建一个数据库: 数据库名称为 tang_shi， 表名为 table1
const tang_shi_table1 = idbKeyval.createStore('tang_shi', 'table1')
// 向对应仓库添加数据
idbKeyval.set('add', 'table1 的数据', tang_shi_table1)
// 默认创建的仓库名称为 keyval-store 表名为 keyval
idbKeyval.set('add', '默认的数据')

使用 createStore 创建的数据库一个库只会创建一个表即：

// 同一个库有不可以有两个表，custom-store-2 不会创建成功:
const customStore = createStore('custom-db-name', 'custom-store-name');
const customStore2 = createStore('custom-db-name', 'custom-store-2');
// 不同的库 有相同的表名 这是可以的:
const customStore3 = createStore('db3', 'keyval');
const customStore4 = createStore('db4', 'keyval');

promisifyRequest

自己管理定制商店，这个没搞太明白，看文档中说既然都用到这个了不如直接使用idb 这个库

总结

本文介绍了两个 IndexedDB 的库，用来解决 localStorage 存储容量太小的问题

localforage 与 idb-keyval 之间我更喜欢 localforage 因为其与 localStorage 相似的api几乎没有上手成本。

如果需要更加灵活的库可以看一下 dexie.js、PouchDB、idb、JsStore 或者 lovefield 之类的库

加载全部内容