localforage-本地存储的优化方案
前言
前端本地化存储算是一个老生常谈的话题了,我们对于 cookies、Web Storage(sessionStorage、localStorage)的使用已经非常熟悉,在面试与实际操作之中也会经常遇到相关的问题,但这些本地化存储的方式还存在一些缺陷,比较明显的缺点如下:
存储量小:即使是web storage的存储量最大也只有 5M
存取不方便:存入的内容会经过序列化,当存入非字符串的时候,取值的时候需要通过反序列化。
当我们的存储量比较大的时候,我们一定会想到我们的 indexedDB,让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储,然而 indexedDB 的使用是比较繁琐而复杂的,有一定的学习成本,但第三方库 localForage 的出现几乎抹平了这个缺陷,让我们轻松无负担的在浏览器中使用 indexedDB。
什么是 indexedDB?
IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象)。
存取方便
IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许你存储和检索用键索引的对象;可以存储结构化克隆算法支持的任何对象。
之前我们使用 webStorage 存储对象或数组的时候,还需要先经过先序列化为字符串,取值的时候需要经过反序列化,那indexedDB就比较完美的解决了这个问题,可以轻松存取对象或数组等结构化克隆算法支持的任何对象。
异步存取
我相信你肯定会思考一个问题:localStorage如果存储内容多的话会消耗内存空间,会导致页面变卡。那么 IndexedDB 存储量过多的话会导致页面变卡吗?
不会有太大影响,因为 IndexedDB 的读取和存储都是异步的,不会阻塞浏览器进程。
庞大的存储量
IndexedDB 的储存空间比LocalStorage 大得多,一般可达到500M,甚至没有上限。
关于 indexedDB 的介绍就到此为止,详细使用在此不再赘述,因为本篇文章我重点想介绍的是 localForage!
什么是 localForage?
localForage 是基于 indexedDB 封装的库,通过它我们可以简化 IndexedDB 的使用。

兼容性
通常涉及到这类型的技术,我们都会考虑一个问题,那就是浏览器的兼容性。我们可以看下 localStorage 与 indexedDB 兼容性比对,两者之间还是有一些小差距。

但是你也不必太过担心,因为 localforage 已经帮你消除了这个心智负担,它有一个优雅降级策略,若浏览器不支持 IndexedDB 则使用 WebSQL ,如果不支持 WebSQL 则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。
localForage 的使用
①使用
import localforage from 'localforage'
②创建一个 indexedDB
const myIndexedDB = localforage.createInstance({name: 'myIndexedDB',
})
③存值
myIndexedDB.setItem(key, value)
④取值
由于indexedDB的存取都是异步的,建议使用 promise.then() 或 async/await 去读值
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()
VUE 推荐使用 Pinia 管理 localForage
如果你想使用多个数据库,建议通过 pinia 统一管理所有的数据库,这样数据的流向会更明晰,数据库相关的操作都写在 store 中,让你的数据库更规范化。
// store/indexedDB.ts
import { defineStore } from 'pinia'
import localforage from 'localforage'export const useIndexedDBStore = defineStore('indexedDB', {state: () => ({filesDB: localforage.createInstance({name: 'filesDB',}),usersDB: localforage.createInstance({name: 'usersDB',}),responseDB: localforage.createInstance({name: 'responseDB',}),}),actions: {async setfilesDB(key: string, value: any) {this.filesDB.setItem(key, value)},}
})
通过调用store来使用库:
import { useIndexedDBStore } from '@/store/indexedDB'
const indexedDBStore = useIndexedDBStore()
const file1 = {a: 'hello'}
indexedDBStore.setfilesDB('file1', file1)
相关文章:
localforage-本地存储的优化方案
前言 前端本地化存储算是一个老生常谈的话题了,我们对于 cookies、Web Storage(sessionStorage、localStorage)的使用已经非常熟悉,在面试与实际操作之中也会经常遇到相关的问题,但这些本地化存储的方式还存在一些缺陷…...
自学SLAM(4)《第二讲:三维物体刚体运动》作业
前言 小编研究生的研究方向是视觉SLAM,目前在自学,本篇文章为初学高翔老师课的第二次作业。 文章目录 前言1.熟悉 Eigen 矩阵运算2.几何运算练习3.旋转的表达4.罗德里格斯公式的证明5.四元数运算性质的验证6.熟悉 C11 1.熟悉 Eigen 矩阵运算 设线性⽅程 …...
C++:容量适配器(栈、队列、优先级队列)
目录 1.容器适配器 4.1 什么是适配器 4.2 STL标准库中的容器适配器 2.stack的使用 2.1 STL库中对stack的实现 3.queue的使用 3.1 STL库中对queue的实现 4.priority_queue使用 4.1模拟实现 priority_queue 5.deque 的简介 1.容器适配器 4.1 什么是适配器 适配器是一种…...
Java-IO流
文章目录 Java-IO流文件字节流文件字符流File类缓冲流转换流打印流数据流对象流 Java-IO流 JDK提供了一套用于IO操作的框架,为了方便我们开发者使用,就定义了一个像水流一样,根据流的传输方向和读取单位,分为字节流InputStream和…...
04、Python 爬取免费小说思路
目录 Python 爬取免费小说思路代码解析爬取东西基本的四行代码:user-agent安装模块从 bs4 导入 BeautifulSoup ,查询某个标签开头的数据筛选遍历获取小说的章节名称每章小说的链接获取请求网址的响应获取小说的内容筛选内容整理内容爬取下载到指定文件夹完整代码:Python 爬取…...
【前端vue面试】vue2
目录 computed和watchv-show和v-ifkey 的重要性v-for 和 v-if 不能一起使用!click的event修饰符事件修饰符表单项修饰符 父子组件通讯生命周期父子组件生命周期顺序 $nextTickslot 插槽动态组件异步组件keep-alivemixin computed和watch computed 有缓存࿰…...
自然语言处理---Transformer机制详解之GPT模型介绍
1 GPT介绍 GPT是OpenAI公司提出的一种语言预训练模型.OpenAI在论文<< Improving Language Understanding by Generative Pre-Training >>中提出GPT模型.OpenAI后续又在论文<< Language Models are Unsupervised Multitask Learners >>中提出GPT2模型.…...
【论文阅读】点云地图动态障碍物去除基准 A Dynamic Points Removal Benchmark in Point Cloud Maps
【论文阅读】点云地图动态障碍物去除基准 A Dynamic Points Removal Benchmark in Point Cloud Maps 终于一次轮到了讲自己的paper了 hahaha,写个中文的解读放在博客方便大家讨论 Title Picture Reference and prenotes paper: https://arxiv.org/abs/2307.07260 …...
2023年传媒行业中期策略 AIGC从三个不同层次为内容产业赋能
基本面和新题材共振,推动传媒互联网行情上涨 AIGC 概念带动,传媒板块领涨 A 股 2023 年第一个交易日(1 月 3 日)至 6 月 2 日,申万传媒指数区间涨幅高达 48.38%,同时期沪深 300 跌幅为 0.25%,…...
iOS上架App Store的全攻略
iOS上架App Store的全攻略 第一步:申请开发者账号 在开始将应用上架到App Store之前,你需要申请一个开发者账号。 1.1 打开苹果开发者中心网站:https://developer.apple.com/ 1.2 使用Apple ID和密码登录(如果没有账号则需要注册…...
操作系统——多个类别产品的生产者-消费者问题(王道视频p33、课本ch6)
1.问题解剖——得到的是 1个“互斥信号量” 3个“同步信号量” 其中特别注意,对于盘子plate可以清空的设计4个对象的,但是只用这一个同步信号量就可以实现 2.代码—— 3.由于这里的同步信号量的初值都是1,所以,即使不设置互斥信…...
uniapp(uncloud) 使用生态开发接口详情5(云公共模块)
1.uniCloud官网 云对象中云公共模块: 网站: https://uniapp.dcloud.net.cn/uniCloud/cf-common.html // 官网介绍 cloudfunctions├─common // 云函数公用模块目录| └─hello-common // 云函数公用模块| ├─package.json| └─index.js // 公用模块代码࿰…...
Oracle数据中如何在 where in() 条件传参
一、问题场景描述 在sql 条件中,如何在 where in()中想传入参数,如果直接 where in(:seqList),当传入单个值,seqList: ‘80’ 是没问题的,但是初入多个值时,seqList: ‘80,90’ ,因缺少单引号&…...
Python:函数篇(每周练习)
编程题: Python第四章作业(初级) (educoder.net) 题一:无参无返回值函数 def print_hi_human(): # 函数名用小写字母print("人类,你好!")if __name__ __main__:print_hi_human() 题二&#…...
为Element Plus封装业务组件FormDialog,将所有需要填写表单的弹窗组件封装,方便快速配置
使用FormDialog组件能够对表单弹窗进行快速配置,不用每次单独写弹窗表单业务组件,快速实现表单弹窗业务功能。 调用页面demo.vue validateRules.js引用 <script setup lang"ts"> import FormDialog from /components/FormDialog/index…...
ubuntu 设置和取消代理
背景 因为国内环境限制,在 linux 上安装一些软件的时候,因为限制就安装不了, 此时就可以通过设置代理的方式来规避这种问题,下面是具体的设置方式 步骤 sudo vim /etc/profile.d/proxy.sh添加以下内容到文件中 export http_pro…...
YOLOv7-PTQ量化部署
目录 前言一、PTQ量化浅析二、YOLOv7模型训练1. 项目的克隆和必要的环境依赖1.1 项目的克隆1.2 项目代码结构整体介绍1.3 环境安装 2. 数据集和预训练权重的准备2.1 数据集2.2 预训练权重准备 3. 训练模型3.1 修改模型配置文件3.2 修改数据配置文件3.3 训练模型3.4 mAP测试 三、…...
【网络协议】聊聊ICMP与ping是如何测试网络联通性
ICMP协议格式 ping是基于iCMP协议工作的,ICMP全称Internet Control Message Protocol,就是互联网控制报文协议。其实就是有点类似于古代行军打仗,哨探进行前方探明具体情况。 IMCP本身处于网络层,将报文封装在IP包里,…...
nginx tomcat 动静分离
动静分离: 访问静态和动态页面分开 实现动态和静态页面负载均衡。 五台虚拟机 实验1,动静分离 思路: 需要设备:三台虚拟机 一台nginx 代理又是静态 两台tomcat 请求动态页面 在全局模块中配置upstream tomcat 新建location…...
java读取指定文件夹下的全部文件,并输出文件名,文件大小,文件创建时间
import java.io.IOException; import java.nio.file.*; import java.nio.file.attribute.*; import java.util.ArrayList; import java.util.List; public class Main { public static void main(String[] args) { try { Path startingDir Paths.get("你的目…...
如何在Bootstrap中实现响应式的统计数据卡片
Bootstrap响应式卡片需用rowcol包裹card实现,如col-12(超小屏一列)、col-md-6(中屏两列)、col-lg-3(大屏四列),依赖栅格系统而非card自身响应。用 card row col 组合实现基础响应式…...
【仅限头部科技公司内部使用的】个性化适配策略矩阵(含12个行业模板+5类敏感代码拦截规则)
第一章:智能代码生成个性化适配策略 2026奇点智能技术大会(https://ml-summit.org) 智能代码生成已从通用模板输出迈向深度个性化适配阶段。开发者背景、项目约束、团队规范与运行时环境共同构成多维适配边界,单一模型输出无法满足真实工程场景的差异化…...
从代码审计到漏洞挖掘:深度解析Gerapy项目管理模块的RCE漏洞(CVE-2021-32849)
从代码审计到漏洞挖掘:深度解析Gerapy项目管理模块的RCE漏洞(CVE-2021-32849) 在分布式爬虫管理领域,Gerapy作为整合Scrapy、Django等技术栈的解决方案,其安全性直接影响企业数据采集业务的稳定性。2021年曝光的CVE-20…...
052篇:NLP文本分类:判断邮件是投诉还是咨询
1. 前言 在RPA自动化中,经常会遇到需要理解文本内容的场景: 客户发来的邮件是投诉还是咨询? 工单描述属于哪个部门处理? 用户评价是正面还是负面? NLP(自然语言处理)可以自动分析文本,判断类别和情感。本文以百度NLP为例,讲解如何调用情感分析和自定义分类接口,并将…...
Dematel法实战:从关系矩阵到要素权重的系统影响力解码
1. Dematel法:系统要素影响力的解码器 第一次接触Dematel法是在分析一个智能家居系统的功能模块时。当时产品经理抛出一个难题:十几个功能模块相互影响,到底哪个才是撬动用户体验的关键支点?传统的主观打分法总是引发团队争论&…...
MicroPython中断处理实战:如何避免内存分配陷阱(附代码示例)
MicroPython中断处理实战:如何避免内存分配陷阱(附代码示例) 嵌入式开发者在使用MicroPython进行硬件编程时,中断处理是不可或缺的核心技术。然而,许多开发者都曾遇到过这样的困境:精心设计的中断服务程序(…...
数字图像相关(DIC)测量系统在软物质实验力学中的应用
近日,由中国科学技术大学与安徽淮南理工大学联合承办的《软物质实验力学测试技术学术研讨会》在淮南市寿县召开。与会学者围绕“生命软物质、智能软材料、柔性电子器件、新型纳米材料”等前沿方向展开研讨。软物质实验力学研究通常关注三个问题:一是变形…...
别再乱升级了!Keil MDK里STM32F4的Pack包版本管理避坑指南
STM32F4开发者的Pack包版本管理终极指南 1. Pack包版本管理的核心挑战 在Keil MDK环境下开发STM32F4系列项目时,Pack包版本管理往往成为工程师们最头疼的问题之一。每次打开工程时,Keil总会"贴心"地提示有新的Pack包可用,但盲目升级…...
图像压缩ONNX模型跨平台推理一致性问题解决方案
图像压缩ONNX模型跨平台推理一致性问题解决方案 摘要 随着深度学习技术的快速发展,基于学习型图像压缩(Learned Image Compression, LIC)算法在压缩效率上已超越传统图像编码技术,逐渐向工业应用迈进。然而,在实际部署过程中,一个关键问题凸显出来:非确定性计算导致概…...
3步掌握Excalidraw:轻松创建手绘风格图表
3步掌握Excalidraw:轻松创建手绘风格图表 【免费下载链接】excalidraw Virtual whiteboard for sketching hand-drawn like diagrams 项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw Excalidraw是一款开源的虚拟白板工具,专为创建…...
