localForage存储

一、什么是 localForage

当我们的存储量比较大的时候,我们一定会想到我们的 indexedDB,让我们在浏览器中也可以
使用数据库这种形式来玩转本地化存储,然而 indexedDB 的使用是比较繁琐而复杂的,
有一定的学习成本,但 localForage 的出现几乎抹平了这个缺陷,让我们轻松无负担的在
浏览器中使用 indexedDB。localStorage如果存储内容多的话会消耗内存空间,会导致页面变卡。
那么 IndexedDB 存储量过多的话会导致页面变卡吗?不会有太大影响,因为 IndexedDB 的读取和存储都是异步的,不会阻塞浏览器进程。IndexedDB 的储存空间比LocalStorage 大得多,一般可达到500M,甚至没有上限。而localForage 是基于 indexedDB 封装的库,通过它我们可以简化 IndexedDB 的使用。

若浏览器不支持 IndexedDB 或 WebSQL,则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。

二、localForage 的使用

1,安装和引入

npm install localforage
import localforage from 'localforage'

2、创建一个 indexedDB

const myIndexedDB = localforage.createInstance({name: 'myIndexedDB',
})

3、存储

myIndexedDB.setItem(key, value)

4、取值(由于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);
}

 5、删除

myIndexedDB.removeItem('somekey')

6、重置数据库

myIndexedDB.clear()


VUE3 推荐使用 Pinia 管理 localForage

// 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)

 《完》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/177956.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32串口波特率在使用中的改变方法

上次讲到了STM32串口波特率在使用中的改变: void MX_USART_UART_Init(UART_HandleTypeDef *huart, USART_TypeDef * uart, int BaudRate) {huart->Instance uart;huart->Init.BaudRate BaudRate;huart->Init.WordLength UART_WORDLENGTH_8B;huart->…

力扣二叉树--第三十三天

前言 前面都是遍历,今天是构造二叉树。 前序和中序可以唯一确定一棵二叉树。 后序和中序可以唯一确定一棵二叉树。 前序和后序不能唯一确定一棵二叉树! 内容 一、从中序与后序遍历序列构造二叉树 106. 从中序与后序遍历序列构造二叉树 给定两个整…

视频文案怎么写,媒介盒子支招

近几年短视频成为风口,各行各业都想分一杯羹,但是一头热的你,是否知道短视频的相关文案怎么写呢?正所谓兵马未动,文案先行,一个合适的文案是上热门的秘密武器,今天媒介盒子就来和大家聊聊:视频…

Doris-Routine Load(二十七)

例行导入(Routine Load)功能为用户提供了一种自动从指定数据源进行数据导入的功能。 适用场景 当前仅支持从 Kafka 系统进行例行导入,使用限制: (1)支持无认证的 Kafka 访问,以及通过 SSL 方…

jks、cer、p12生成

//jks生成 keytool -genkeypair -alias "tomcat" -validity 3650 -keyalg "RSA" -keystore "test.jks" //cer生成 keytool -export -alias "tomcat" -keystore "test.jks" -storepass 123456 -file test.cer //p12生成 …

Attempted to serialize java.lang.Class. Forgot to register a type adapter?

问题:Attempted to serialize java.lang.Class. Forgot to register a type adapter? 原因:Gson不支持类信息,序列化和返序列化 解决方案: 使用Gson的 excluedFieldsWithoutExposeAnnotation() 选项忽略这些字段 Gson gson new …

VMware系列:VMware官网注册账号之验证码问题以及获取ESXi安装程序的方法

VMware官网注册账号之验证码问题以及获取ESXi安装程序的方法 一. VMware官网注册账号之验证码问题1. VMware官网基础账号注册2. VMware官网exsi试用注册二. 获取ESXi安装程序的方法原生态版本下载过程OEM版本下载VMware官网下载过程服务器厂家官网下载过程附录:一. VMware官网…

ArkTS框架深度解析:@Prop、@Link、@ObjectLink装饰器的应用与同步机制【鸿蒙专栏-09】

文章目录 ArkTS框架深度解析:@Prop、@Link、@ObjectLink装饰器的应用与同步机制【HarmonyOS开发】@Prop装饰器概述限制条件使用规则说明使用场景@Link装饰器概述限制条件使用规则说明使用场景@Link装饰器的高级用法动态创建链接自定义同步逻辑最佳实践和注意事项结语ArkTS框架…

小新 Air-14 2021 Intel处理器ITL版(82FF)原厂Win11系统

链接:https://pan.baidu.com/s/1EkqpdGcixCNER5uP5yIc4Q?pwddm1d 提取码:dm1d lenovo联想小新Air14笔记本2021款【82FF】原装出厂Windows11系统镜像ISO文件 系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、联想电脑管家等…

手机如何去图片水印?试试这三种方法

手机如何去图片水印?去水印已然成为了自媒体从业者必备技能之一,无论是工作或生活中经常遇到图片/视频上带有水印,非常影响整体观感,网上去水印方法又很多,如果你是小白,这篇文章将提供给你三个实用去水印的…

草图大师sketchup道路怎么快速种树?

草图大师sketchup道路怎么快速种树?草图大师中的道路图纸想要在道路两旁种树,该怎么快速给道路种树呢?下面我们就来看看详细的教程,需要的朋友可以参考下 草图大师sketchup中想要快速种树,该怎么种多棵树呢&#xff1…

数据结构校招知识点总结

文章目录 前言1. 数据结构概论、算法设计与分析1.1 数据结构三要素?1.2 算法的基本概念?1.3 什么是时间复杂度? 2. 线性表2.1 链表结构和顺序存储结构的区别?2.2 单链表和双链表的区别?2.3 头指针和头结点的区别&#…

基于Python的网络爬虫设计与实现

基于Python的网络爬虫设计与实现 摘要:从互联网时代开始,网络搜索引擎就变得越发重要。大数据时代,一般的网络搜索引擎不能满足用户的具体需求,人们更加注重特定信息的搜索效率,网络爬虫技术应运而生。本设计先对指定…

上海数交所与合合信息发布产业数据行业创新中心,政产学研合力为“数据航母”加速

大数据产业是数字经济创新发展、加速发展的重要方向。11月25日,2023全球数商大会在上海盛大开幕。大会以“数联全球、商通未来”为主题,聚焦数字经济时代下,数据要素推动实体经济发展的规划与成果,是数据交易领域的行业级峰会和数…

Kafka 如何保证消息消费的全局顺序性

哈喽大家好,我是咸鱼 今天我们继续来讲一讲 Kafka 当有消息被生产出来的时候,如果没有指定分区或者指定 key ,那么消费会按照【轮询】的方式均匀地分配到所有可用分区中,但不一定按照分区顺序来分配 我们知道,在 Kaf…

动态:class和:style绑定

1. 在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术 2. 动态class绑定 :class等号后的变量值 可以是字符串 :class等号后 可以是对象 :class等号后 可以是数组 3. 动态style绑定 :style"{ color: myPinkColor, fontS…

医疗级超声波雾化器方案

药用雾化器是一种将药物液体转化为微小颗粒状物质并通过呼吸道输送到呼吸系统的医疗器械。常用于治疗呼吸道疾病,如哮喘、气管炎、肺炎、鼻窦炎等。且被广泛应用于医疗、美容、家居等领域。现代化的药用雾化器通常采用单片机方案控制,能够更加稳定地实现…

【软件测试】银行测试项目VS常规项目有什么区别?怎么做?

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 银行测试项目跟常…

ESP32-Web-Server编程- JS 基础5

ESP32-Web-Server编程- JS 基础5 概述 JS 编程内容颇多,我们提供一些简单的示例,先玩再学,边玩边学。 示例1-演示通过 JS 进行温度转换 资源链接 对应示例的 code 链接 (点击直达代码仓库) 示例2-增加网页弹窗 演…

文献速递:使用人工智能进行超声检查的文章:读者指南(超声影像人工智能专题文献分享)

文献速递:使用人工智能进行超声检查的文章:读者指南(超声影像人工智能专题文献分享) 01 文献速递介绍 本文讨论了人工智能(AI)如何将医学影像转化为可挖掘的高通量数据,并强调了机器学习算法…