前端本地存储方案-localForage-vue3中使用

前言

前端有多种本地存储方案可供选择,常见的有:

  1. Cookie:小型的文本文件,存储少量数据
  2. Web Storage :包括:localStorage和sessionStorage,存储数据有上限(5M)左右
  3. IndexedDB:一种高级的客户端存储API,存储量大、高版本浏览器兼容性较好

这些本地存储方案各有优缺点,近期发现一种前端本地存储的库 localForage,遵循“渐进增强”或“优雅降级”的原则,集合以上多种方式,使用异步API封装了Web Storage、IndexedDB和WebSQL的库,提供了简单易用的方法来存储和检索数据,API 相对简单,易于上手,下面开始正式介绍localForage用法。

localForage

localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储(IndexedDB 或 WebSQL)和简单的类 localStorage 的 API ,localForage 能改善 Web 应用的离线体验。

在不支持 IndexedDB 或 WebSQL 的浏览器中,localForage 使用 localStorage。

github地址: https://github.com/localForage/localForage
API文档:https://localforage.github.io/localForage/#data-api-setitem

第一种使用方法

  1. 安装引入
// 通过npm安装
npm install --save localforage
// 引入
import localforage from 'localforage'
// 或通过 bower 引入
<script src="localforage.js"></script>
  1. 创建indexedDB
const firstIndexedDB = localforage.createInstance({name: 'myFirstIndexedDB',// 支持config所有配置// storeName: 'keyvaluepairs', // 仅接受字母,数字和下划线
})
  1. 存值
//存储字符串
firstIndexedDB.setItem("data1", "今天是个好日子");
//存储对象
firstIndexedDB.setItem("data2", {a:1,b: 2});
//存储数组对象
firstIndexedDB.setItem("data3", [{a:1,b: 2}, {a:2,b:3}, {a:3,b:4}]);

请添加图片描述
4. 取值 (由于indexedDB的存取都是异步的,建议使用 promise.then() 或 async/await 去读值,如果 key 不存在,getItem() 将返回 null。)

//第一种方法
firstIndexedDB.getItem('data1').then(value=> {console.log("数据data1",value);
}).catch(err => {console.log('错误信息', err)
});
firstIndexedDB.getItem('data2').then(value=> {console.log("数据data2",value);
}).catch(err => {console.log('错误信息', err)
});//第二种方法
try {const value = await firstIndexedDB.getItem('data3');console.log("数据3",value);
} catch (err) {console.log('错误信息', err)
}

请添加图片描述
5. 删除

//输入key值
firstIndexedDB.removeItem('data3');
  1. 重置清空数据库
firstIndexedDB.clear();
  1. 获取数据库存储key的数量
firstIndexedDB.length().then(numberOfKeys=> {// 输出数据库的大小console.log("数据库长度",numberOfKeys);
}).catch(function(err) {console.log("出错",err);
});

请添加图片描述
8. 根据key的索引获取名称

firstIndexedDB.key(2).then(keyName=> {// key 名console.log("key 名",keyName);
}).catch(function(err) {console.log("出错",err);
});

请添加图片描述
9. 获取数据库所有key值

firstIndexedDB.keys().then(function(keys) {console.log("所有key集合",keys);
}).catch(function(err) {console.log("出错",err);
});

请添加图片描述
10. 迭代循环打印所有key-value值

 firstIndexedDB.iterate(function(value, key, iterationNumber) {// 此回调函数将对所有 key/value 键值对运行console.log([key, value,iterationNumber]);}).then(function() {console.log('迭代完成');}).catch(function(err) {console.log("出错",err);});

请添加图片描述
11. 提前退出迭代循环

 firstIndexedDB.iterate(function(value, key, iterationNumber) {// 此回调函数将对所有 key/value 键值对运行if (iterationNumber < 3) {console.log([key, value, iterationNumber]);} else {return [key, value, iterationNumber];}}).then(function() {console.log('退出迭代');}).catch(function(err) {console.log("出错",err);});
  1. 创建多实例
var secondIndexedDB = localforage.createInstance({name: "secondIndexedDB"
});var thirdIndexedDB = localforage.createInstance({name: "thirdIndexedDB"
});
  1. 设置某个数据仓库 key 的值
secondIndexedDB.setItem("key", "value");
thirdIndexedDB.setItem("key", "value2");
  1. 删除数据库 dropInstance

14.1 调用时,若不传参,则删除当前实例的数据仓库

localforage.dropInstance().then(function() {console.log('删除当前实例的数据仓库')
});

14.2 调用时,若参数是指定了 name 和 storeName 属性的对象,会删除指定的数据仓库

localforage.dropInstance({name: "thirdIndexedDB",storeName: "keyvaluepairs"
}).then(function() {console.log('删除指定的数据库下的指定数据仓库')
});

14.3 调用时,若参数仅指定了 name 属性的对象,将删除指定的数据库(及其所有数据仓库)

localforage.dropInstance({name: "secondIndexedDB"
}).then(function() {console.log('删除指定的数据库(及其所有数据仓库)')
});

第二种使用方法

  1. 选择特定存储引擎

默认情况下,localForage 按照以下顺序选择数据仓库的后端驱动:
(1) IndexedDB
(2) WebSQL
(3) localStorage
如果你想强制使用特定的驱动,可以使用 setDriver(),参数为以下的某一个或多个:
(1) localforage.INDEXEDDB
(2) localforage.WEBSQL
(3) localforage.LOCALSTORAGE

强制设置 localStorage 为后端的驱动

localforage.setDriver(localforage.LOCALSTORAGE);

列出可选的驱动,以优先级排序

localforage.setDriver([localforage.LOCALSTORAGE, localforage.INDEXEDDB]);
  1. 配置
    可以通过 config() 方法设置数据库信息。可用的选项有 driver,name,storeName,version,size,和 description。
localforage.config({driver      : localforage.LOCALSTORAGE, // 使用 LOCALSTORAGE;也可以使用 setDriver()name        : 'firstIndexedDB',version     : 1.0,size        : 4980736, // 数据库的大小,单位为字节。现仅 WebSQL 可用storeName   : 'keyvaluepairs1', // 仅接受字母,数字和下划线description : 'some description'
});
  1. 存值
    注意:在数据交互之前,你必须先调用 config()。即在使用 getItem(),setItem(),removeItem(),clear(),key(),keys() 或 length() 前要先调用 config()。
localforage.setItem("data1", "今天是个好日子");

请添加图片描述
5. 判断异步驱动程序初始化过程是否已完成

localforage.ready().then(()=> {// 当 localforage 将指定驱动初始化完成时,此处代码运行console.log(localforage.driver()); //返回正在使用的驱动的名字 "asyncStorage"
}).catch( e=> {console.log(e); // `No available storage method found.`// 当没有可用的驱动时,`ready()` 将会失败
});
  1. 判断浏览器是否支持driverName 返回布尔值
console.log(localforage.supports(localforage.INDEXEDDB));

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

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

相关文章

系统架构师备考倒计时26天(每日知识点)

详细的项目范围说明书&#xff0c;是项目成功的关键。 范围定义的输入包括以下内容: ① 项目章程。如果项目章程或初始的范围说明书没有在项目执行组织中使用&#xff0c;同样的信息需要进一步收集和开发&#xff0c;以产生详细的项目范围说明书。 ② 项目范围管理计划。 ③ 组…

mac M2芯片在使用Android studio 编译问题bad cpu type in executable android

由于mac的intel芯片的一些指令集没有同步在M1 M2芯片上所以需要做兼容 打开控制台&#xff08;通过访达 - 应用程序 - 实用工具 - 终端 &#xff09; 输入 softwareupdate --install-rosetta 之后在输入 A 就可以了。 原产考地址&#xff1a;硬核&#xff01;在 M1 芯…

一个非常简单的变分量子分类器 (VQC)

一、说明 在之前的帖子&#xff08;这里和这里&#xff09;中&#xff0c;我已经开始谈论 QML&#xff0c;为什么以及如何学习&#xff0c;从现在开始&#xff0c;我将开始分享我的研究和发现&#xff0c;到目前为止&#xff0c;这些都是非常基本的。 二、实验概述 今天&#…

学习黑马程序员JavaScript总结

今天注意学习了数据类型、运算符、常量、数组&#xff0c;这些内容接受的还是比较快的&#xff0c;因为前面学过C语言还有Python&#xff0c;比较不同的地方就是未定义类型undefined&#xff0c;这个类型是在只声明了变量但未赋值&#xff0c;而unll空类型它是赋了值但该值是空…

Docker-consul容器服务更新与发现

目录 一、consul简介 1、什么是服务注册与发现 2、什么是consul 3、consul的关键特性 二、consul部署 1、consul服务器部署 1.1 建立consul服务 2、查看集群信息 3、通过http api 获取集群信息 三、registrator部署 1、安装Gliderlabs/Registrator 2、测试服务发现…

常见排序算法详解

目录 排序的相关概念 排序&#xff1a; 稳定性&#xff1a; 内部排序&#xff1a; 外部排序&#xff1a; 常见的排序&#xff1a; 常见排序算法的实现 插入排序&#xff1a; 基本思想&#xff1a; 直…

Milvus踩坑笔记

本文用于记录在学习 Milvus文档时所遇到的一些Bug或报错及解决方法 参考文章&#xff1a; 官方demo&#xff1a;在Dynamic Schema的集合中插入数据 报错1&#xff1a;auto id enabled, id shouldnt in entities[0] 问题描述 此报错出现在Milvus官方在介绍 Dynamic Schema …

7.1 yolov5优化模型时,自动标注xml数据

yolov5优化模型时&#xff0c;一般需要继续标注一些检测错误的图片&#xff0c;将其标为xml数据。以下是根据训练好的模型自动标注xml数据的python代码&#xff1a; 注意&#xff1a;代码中包含了本人的yolov5的测试过程&#xff0c;测试过程可以自己根据yolov5的测试文件自行…

基于小波变换的分形信号r指数求解算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ................................................................... %通过功率谱密度曲线…

企业聊天应用程序使用 Kubernetes

1. 客户端-服务器工作流程 客户端&#xff1a;在我们的架构中&#xff0c;客户端可以分为三种类型&#xff1a;iOS 和 Android 移动应用程序以及 Web 聊天。移动应用程序首先通过 API 网关服务与服务器进行通信&#xff0c;其中客户端会生成一个访问令牌&#xff0c;该令牌将授…

华测监测预警系统 2.2 存在任意文件读取漏洞

华测监测预警系统 2.2 存在任意文件读取漏洞 一、 华测监测预警系统 2.2 简介二、漏洞描述三、影响版本四、fofa查询语句五、漏洞复现1、手动复现2、自动复现 六、修复建议 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信…

芯科蓝牙BG27开发笔记10-BG27样板调试

样板使用了1.5V电源&#xff0c;boost升压到1.8V供MCU使用&#xff0c;因此IO通信的电平需要注意&#xff1a; 不能使用常用的5V、3.3V的jlink进行调试&#xff0c;类似的uart通信也一样。 BRD4001A底板的jlink如何使用&#xff1f; 参考开发板套件的说明文档《ug551-brd4194…

小迈物联网网关对接串口服务器[Modbus RTU]

很多工控现场&#xff0c;方案中会使用串口服务器采集Modbus RTU的设备&#xff0c;这种情况下一般会在PC机上装上串口服务器厂家的软件来进行数据采集。如果现场不需要PC机&#xff0c;而是通过网关将数据传输到软件平台&#xff0c;如何实现呢&#xff1f; 本文简要介绍小迈网…

Dockerfile指令详解

如果我们可以把每一层修改、安装、构建、操作的命令都写入一个脚本&#xff0c;用这个脚本来构建、定制镜像&#xff0c;那么之前提及的无法重复的问题、镜像构建透明性的问题、体积的问题就都会解决。这个脚本就是 Dockerfile。 Dockerfile 是一个文本文件&#xff0c;其内包…

【TB作品】基于MSP430G2553单片机的超声波测距与报警系统,原理图,PCB

功能&#xff1a; 1 超声波测距显示 2 按键设置报警上下限 3 蜂鸣器报警 原理图&#xff1a; PCB样式&#xff1a; 实物&#xff1a; 代码&#xff1a; https://github.com/xddun/blog_code_search

DC/DC开关电源学习笔记(十二)Boost升压电路仿真及工程应用案例

(十二)Boost升压电路仿真及工程应用案例 1.Boost电路仿真案例2.Boost电路工程应用实例1.Boost电路仿真案例 指标参数:输入电压5V,输出电压12V,输出电流1A,开关频率10kHz,电压纹波0.5%。 根据输入指标参数确定CCM模式下各个关键元器件测参数: 负载电阻Rl=12R 占空比D=6…

Zabbix“专家坐诊”第206期问答汇总

问题一 Q&#xff1a;老师&#xff0c;我想配置一下监控项和触发器&#xff0c;目前我想要三个&#xff0c;内存的使用情况百分比、磁盘的剩余多少G、CPU的使用情况百分比&#xff0c;用自带的模板修改&#xff0c;该怎么做&#xff1f; A&#xff1a;可以用100减去内置键值cp…

数据结构学习笔记——数据结构概论

目录 一、数据与数据元素二、数据类型和抽象数据类型三、数据结构的定义&#xff08;一&#xff09;逻辑结构&#xff08;二&#xff09;存储结构&#xff08;物理结构&#xff09;1、顺序存储结构2、链式存储结构3、索引存储结构4、散列存储结构 &#xff08;三&#xff09;数…

Allegro基本规则设置指导书之Spacing规则设置

进入规则设置界面 1.设置Line 到其他的之间规则: 2.设置Pins 到其他的之间规则: 3.设置Vias 到其他的之间规则:

利用easy excel 实现文件导出

一.创建实体类 package com.siact.product.jwp.module.report.dto;import com.alibaba.excel.annotation.ExcelProperty; import com.alibaba.excel.annotation.write.style.ColumnWidth; import com.alibaba.excel.annotation.write.style.ContentRowHeight; import com.alib…