脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → localStorage容量缺陷

弥补localStorage容量缺陷方法详解

 更新时间：2022年11月07日 10:24:29   作者：唐诗  
这篇文章主要为大家介绍了弥补localStorage容量缺陷的方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

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 之类的库

以上就是弥补localStorage容量缺陷方法详解的详细内容，更多关于localStorage容量缺陷的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 移动端吸顶fixbar的解决方案详解

    移动端吸顶fixbar的解决方案详解

    这篇文章主要介绍了移动端吸顶fixbar的解决方案详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • layerUI下的绑定事件实例代码

    layerUI下的绑定事件实例代码

    今天小编就为大家分享一篇layerUI下的绑定事件实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript必知必会(三) String .的方法来自何方

    JavaScript必知必会(三) String .的方法来自何方

    这篇文章主要介绍了JavaScript必知必会(三) String .的方法来自何方的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 微信小程序实现锚点功能

    微信小程序实现锚点功能

    这篇文章主要为大家详细介绍了微信小程序实现锚点功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JS实用的动画弹出层效果实例

    JS实用的动画弹出层效果实例

    这篇文章主要介绍了JS实用的动画弹出层效果,实例分析了javascript实现动画效果弹出层的方法,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • jquery 实现上下滚动效果示例代码

    jquery 实现上下滚动效果示例代码

    上下滚动的效果，不用说，大家都有看到过，本文为大家介绍下使用jquery实现上下滚动效果，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • JavaScript中函数声明与函数表达式的区别详解

    JavaScript中函数声明与函数表达式的区别详解

    可能很多朋友只知道两种声明方式一个是函数声明一个是函数表达式，具体有什么不同没能说得很好。事实上，JavaScript的解析器对函数声明与函数表达式并不是一视同仁地对待的。下面看看这两者到底有什么不同。
    2016-08-08
  • 用js控制组织结构图可以任意拖拽到指定位置

    用js控制组织结构图可以任意拖拽到指定位置

    用js控制生成了一个组织结构图并设置这个组织结构可以任意拖动到指定位置，具体代码如下
    2014-01-01
  • 理解javascript中的严格模式

    理解javascript中的严格模式

    这篇文章主要帮助大家理解javascript中的严格模式，何为严格模式，如何启用严格模式，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Webpack按需加载打包chunk命名的方法

    Webpack按需加载打包chunk命名的方法

    这篇文章主要给大家介绍了关于Webpack按需加载打包chunk命名的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09

最新评论