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("你的目…...
抖频技术对传导EMI抑制效果的影响研究综述
抖频技术对传导EMI抑制效果的影响研究综述摘要:随着开关电源向高频化发展,传导电磁干扰(EMI)的抑制成为关键挑战。抖频调制(Frequency Jitter)技术通过扩展开关噪声的频谱能量,成为经济有效的抑…...
02华夏之光永存:黄大年茶思屋榜文解法「第7期2题」大规模光网络多约束寻路算法·双路径解法
华夏之光永存:黄大年茶思屋榜文解法「第7期2题」 大规模光网络多约束寻路算法双路径解法(约束内最优本源降维) 一、摘要 本题为全光算力网络路由调度领域顶级技术难题,本文采用工程化可复现逻辑,提供两条标准化解题路径…...
国民技术N32G455VE开发实战:JLink_V644g添加芯片全流程(附资源包)
国民技术N32G455VE开发实战:JLink_V644g环境下的芯片支持全流程解析 在嵌入式开发领域,快速搭建开发环境并实现芯片的调试支持是项目推进的关键第一步。对于采用国民技术N32G455VE这款高性能MCU的开发者来说,如何在JLink_V644g调试器中添加对…...
惠普OMEN游戏本终极性能解锁指南:OmenSuperHub开源工具完全解析
惠普OMEN游戏本终极性能解锁指南:OmenSuperHub开源工具完全解析 【免费下载链接】OmenSuperHub 使用 WMI BIOS控制性能和风扇速度,自动解除DB功耗限制。 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 还在为官方Omen Gaming Hub的臃…...
uni-app集成优博讯DT50U:串口与广播模式下的硬件功能开发实践
1. 优博讯DT50U与uni-app开发基础 优博讯DT50U是一款工业级PDA设备,集成了RFID读写、条码扫描等实用功能。对于需要在移动端实现硬件集成的开发者来说,通过uni-app框架调用这些硬件功能是个不错的选择。uni-app作为跨平台开发框架,可以一套代…...
DeerFlow 系列教程 第十五篇 | Guardrails 安全防护与可观测性
DeerFlow 系列教程 第十五篇 本篇教程继续模块四:高级功能与扩展,全面剖析 DeerFlow 的安全防护机制和可观测性体系。我们将深入理解 Guardrails 防护栏的策略执行架构、SandboxAuditMiddleware 的 Bash 命令审计、路径遍历防护与沙箱隔离机制、技能安全扫描、循环检测中间件…...
别再纠结了!MySQL和PostgreSQL到底怎么选?从CPU核数到索引类型,一次给你讲透
MySQL与PostgreSQL技术选型指南:从架构差异到业务场景适配 当项目面临数据库选型时,技术决策者常常陷入两难境地。作为开源关系型数据库的双雄,MySQL和PostgreSQL各有拥趸,但真正的专业选择应当基于客观的技术特性和实际业务需求。…...
【卷卷漫谈】DeepSeek V4 背后那条没退路的山路
结论:DeepSeek V4 还有不到两周发布,但它背后那条路——从 CUDA 转向华为昇腾 CANN 框架——才是这篇文章真正想说的。这是一个关于"代价"的故事。今天是 2026 年 4 月 17 日。DeepSeek V4 还没发布。从去年年底开始,"V4 下周…...
告别Source Insight卡顿!用Vim + Ctags + Cscope打造你的Linux代码阅读神器(附.vimrc配置)
从零构建极速代码导航环境:VimCtagsCscope实战指南 第一次接触大型C项目时,我像大多数新手一样选择了图形化IDE。直到某天在远程服务器上,看着Source Insight索引文件时逐渐变红的进度条和最终崩溃的X11会话,才意识到该寻找更高效…...
小白分享如何Go 语言中的图形界面开发:从 GUI 到 WebAssembly
编程语言里的Go 语言凭借其高效、简洁以及强大的并发能力,已经成为了众多开发者的心头好。而图形界面开发,一直是编程领域中一个重要的分支,它能够让用户与程序进行直观的交互。Go 语言在图形界面开发方面也有不少的探索和实践,从…...
