localforage本地存储(融合Web Storage,Web SQL Database,ndexedDB三种前端存储)

介绍

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

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

可用于 收集用户使用日志 ,存储大量数据(需要支持IndexedDB 或 WebSQL)

前端本地存储

Cookie:一种小型的客户端和服务器小文本文件。(有条数限制,每条最大4kb左右)。
Web Storage:HTML5引入,包括localStorage和sessionStorage。(最大可存5Mb左右)。
IndexedDB:一个非关系型数据库,可以存储大量数据,支持索引,无需手动进行序列化和反序列化。(无存储大小限制,老版本浏览器兼容性差)。
Web SQL Database:类似于关系型数据库的操作方式,可以存储大量数据,无需手动进行序列化和反序列化。(无存储大小限制,兼容性差,已被废弃)。
File API:HTML5引入,可访问用户的本地文件系统。(安全性和兼容性差)。

localforage使用

1.引入插件

直接script引入
<script src="localforage/dist/localforage.js"></script>使用npm安装并导入
npm install localforage
import localForage from "localforage";

2.配置localforage,数据交互之前,必须先调用 config()

localforage.config({driver      : localforage.WEBSQL, // 指定某个,需要注意浏览器兼容性//driver      : [localforage.WEBSQL, localforage.INDEXEDDB, localforage.LOCALSTORAGE], // 指定使用顺序,哪个可用先用哪个name        : 'myApp', // 数据库名称version     : 1.0, // 数据库版本size        : 4980736, // 数据库的大小,单位为字节。现仅 WebSQL 可用storeName   : 'keyvaluepairs', // 仅接受字母,数字和下划线description : 'some description', // 描述信息
});

3.[可选]配置多个实例

var mainStore = localforage.createInstance({name: "nameHere",storeName   : 'tableOne',description : '...'
});var otherStore = localforage.createInstance({name: "otherName"
});// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
mainStore.setItem("key", "value");
otherStore.setItem("key", "value2");//删除该实例
otherStore.dropInstance().then(function() {console.log('Dropped the store of the current instance');
});

4.增删改查等功能,支持promise,async/await,回调函数三种方式

//支持promise格式,官方推荐
localforage.setItem('somekey', 'some value').then(function (value) {// Do other things once the value has been saved.console.log(value);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//支持async/await格式
try {const value = await localforage.getItem('somekey');console.log(value);
} catch (err) {console.log(err);
}
//支持回调函数
localforage.removeItem('somekey', function(err) {console.log(err);
});
//清空
localforage.clear().then(function() {// Run this code once the database has been entirely deleted.console.log('Database is now empty.');
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取记录的条数
localforage.length().then(function(numberOfKeys) {// Outputs the length of the database.console.log(numberOfKeys);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取id为2的数据
localforage.key(2).then(function(keyName) {// Name of the key.console.log(keyName);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//获取所有的key值
localforage.keys().then(function(keys) {// An array of all the key names.console.log(keys);
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});
//迭代
localforage.iterate(function(value, key, iterationNumber) {// Resulting key/value pair -- this callback// will be executed for every item in the// database.console.log([key, value]);
}).then(function() {console.log('Iteration has completed');
}).catch(function(err) {// This code runs if there were any errorsconsole.log(err);
});//其他api
localforage.driver(); // 返回config配置的name的值
localforage.supports(localforage.INDEXEDDB); // 判断是否支持INDEXEDDB,返回true/false
//判断是否准备就绪
localforage.ready().then(function() {// This code runs once localforage// has fully initialized the selected driver.console.log(localforage.driver()); // LocalStorage
}).catch(function (e) {console.log(e); // `No available storage method found.`// One of the cases that `ready()` rejects,// is when no usable storage driver is found
});
//删除指定实例
localforage.dropInstance({name: "otherName"
}).then(function() {console.log('Dropped otherName database').
});

参考https://localforage.github.io/localForage/#localforage

参考https://github.com/xmoyking/localForage-cn

在vue中使用

1.安装依赖

npm install  --save localforage vlf

2.引入依赖

//在main.js中引入
import Vlf from 'vlf'
import localforage from 'localforage'
Vue.use(Vlf, localforage)

3.使用插件存取数据

// 创建实例
this.$vlf.createInstance({storeName: 'user'
})
// 迭代
this.$vlf.iterate((value, key, num) => {console.log(key);
});
// 设置值
this.$vlf.setItem('test', 'hello').then(v => {console.log(v);
});
//其他和官方使用一致

参考https://github.com/dmlzj/vlf

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

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

相关文章

解决服务器Tab键不能补全问题

编辑~/.config/xfce4/xfconf/xfce-perchannel-xml/xfce4-keyboard-shortcuts.xml 命令&#xff1a;vim ~/.config/xfce4/xfconf/xfce-perchannel-xml/xfce4-keyboard-shortcuts.xml替换&#xff1a;<property name“<Super>Tab” type“string” value“switch_window…

c++primer—读书笔记【全能详细版】

第1章 开始 1.1 编写一个简单的c程序 1.1.1 编译.运行程序 ​ int类型是一种内置类型&#xff0c;即语言自身定义的类型 1.2 初识输入输出 ​ 输入流和输出流而言&#xff0c;一个流就是一个字符序列。术语“流”的意思表示&#xff0c;随时间的推移&#xff0c;字符是顺序…

C#中的.NET与.NET Framework区别

C#是一种编程语言&#xff0c;而.NET是一个开发平台。在.NET生态系统中&#xff0c;有两个相关但不同的概念&#xff1a;.NET和.NET Framework。 .NET Framework 发布时间&#xff1a; .NET Framework是最早引入的&#xff0c;它于2002年首次发布。它是一个用于构建Windows应…

dl转置卷积

转置卷积 转置卷积&#xff0c;顾名思义&#xff0c;通过名字我们应该就能看出来&#xff0c;其作用和卷积相反&#xff0c;它可以使得图像的像素增多 上图的意思是&#xff0c;输入是22的图像&#xff0c;卷积核为22的矩阵&#xff0c;然后变换成3*3的矩阵 代码如下 import…

Django(三)

1.快速上手 确保app已注册 【settings.py】 编写URL和视图函数对应关系 【urls.py】 编写视图函数 【views.py】 启动django项目 命令行启动python manage.py runserverPycharm启动 1.1 再写一个页面 2. templates模板 2.1 静态文件 2.1.1 static目录 2.1.2 引用静态…

【三维生成】稀疏重建、Image-to-3D方法(汇总)

系列文章目录 总结一下近5年的三维生成算法&#xff0c;持续更新 文章目录 系列文章目录一、LRM&#xff1a;单图像的大模型重建&#xff08;2023&#xff09;摘要1.前言2.Method3.实验 二、SSDNeRF&#xff1a;单阶段Diffusion NeRF的三维生成和重建&#xff08;ICCV 2023&am…

HTML---定位

目录 文章目录 一.定位属性概述 二.position 基础数值 三.z-index属性 网页元素透明度 练习 一.定位属性概述 HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性&#xff0c;包括position、top、bottom、left和right等。 position属性指定了元素的定位方式&a…

腾讯云轻量2核2G3M带宽服务器、40G系统盘、200G月流量优惠62元一年

继昨天阿里云2核2G3M带宽轻量应用服务器降价到63元后&#xff0c;腾讯云迅速做出响应&#xff0c;腾讯云轻量2核2G3M服务器降价到62元一年&#xff0c;1元之差&#xff0c;你选择阿里云还是腾讯云&#xff1f;值得一提的是&#xff0c;阿里云不限制月流量&#xff0c;但是腾讯云…

IT运维工程师职业发展与出路

运维工程师的出路到底在哪里&#xff1f; 你是不是也常常听到身边的运维人员抱怨&#xff0c;他们的出路到底在哪里呢&#xff1f;别着急&#xff0c;让我告诉你&#xff0c;运维人员就像是IT界的“万金油”&#xff0c;他们像“修理工”一样维修服务器&#xff0c;像“消防员…

VMware安装笔记

1、首先准备安装文件 没有的小伙伴可以网上自行下载&#xff0c;或者给我留言&#xff0c;我发给你。 2、开始安装 2.1、双击运行exe安装文件&#xff0c;下一步 2.2、接受许可&#xff0c;下一步 2.3、选择安装路径 2.4、选择好安装路径后&#xff0c;继续下一步 2.5、取消勾…

侦探IP“去推理化”:《名侦探柯南》剧场版走过26年

2023年贺岁档&#xff0c;柯南剧场版的第26部《黑铁的鱼影》如期上映。 这部在日本狂卷票房128亿日元的作品&#xff0c;被誉为有史以来柯南剧场版在商业成绩上最好的一部。 但该作在4月份日本还未上映前&#xff0c;就于国内陷入了巨大的争议。 试映内容里&#xff0c;灰原…

网络安全面试题目

http与https的区别&#xff1a; 1、https协议需要到ca申请证书&#xff0c;一般免费证书较少&#xff0c;因而需要一定费用。 2、http是超文本传输协议&#xff0c;信息是明文传输&#xff0c;https则是具有安全性的ssl加密传输协议。 3、http和https使用的是完全不同的连接方式…

设计从容不迫!12款在线平面设计工具,让你事半功倍!

平面设计是图形表达和信息展示的重要手段&#xff0c;在游戏场景、人物造型、插图、广告制作等艺术设计领域有着重要的应用&#xff0c;如海报设计、包装设计等。 平面设计强调视觉传达&#xff0c;一般以图像、图形、文字等视觉元素为主要手段&#xff0c;通过排版、配色、构…

普中STM32-PZ6806L开发板(烧录方式)

前言 有两种方式, 串口烧录和STLink方式烧录;串口烧录 步骤 开发板USB转串口CH340驱动板接线到USB连接PC使用自带工具普中自动下载软件.exe烧录程序到开发板 ST Link方式 这种方式需要另外进行供电&#xff0c; 我买的如下&#xff0c;当年用于调试STM8的&#xff0c;也可…

Upload-lab(pass1~2)

Pass-1-js检查 这里检验 因为是前端js校验,所以只用绕过js前端校验 用burp抓包修改文件类型 写一个简易版本的php Pass-2-只验证Content-type 仅仅判断content-type类型 因此上传shell.php抓包修改content-type为图片类型&#xff1a;image/jpeg、image/png、image/gif

C语言初学7:循环

while 循环 一、while 循环语法&#xff1a; while(condition) {statement(s); } condition 为任意非零值时都为 true。当条件为 true 时执行循环。 当条件为 false 时&#xff0c;退出循环&#xff0c;程序流将继续执行紧接着循环的下一条语句。 二、while 循环举例 #inc…

k8s二进制部署--部署高可用

连接上文 notready是因为没有网络&#xff0c;因此无法创建pod k8s的CNI网络插件模式 1.pod内部&#xff0c;容器与容器之间的通信。 在同一个pod中的容器共享资源和网络&#xff0c;使用同一个网络命名空间。 2.同一个node节点之内&#xff0c;不同pod之间的通信。 每个pod都…

做伦敦金交易要知道的具体风险管理要求

做伦敦金交易风险控制是很重要的&#xff0c;但是光喊口号是没有用的&#xff0c;大家都知道风险控制的重要性&#xff0c;却不知道具体的控制风险的方法&#xff0c;这对交易没有裨益。下面我们就来介绍一些具体的风险管理的方法。 将风险具体化。如果离开实际&#xff0c;空谈…

文件夹共享功能的配置 以及Windows server2012防火墙的配置

目录 一. 配置文件夹共享功能 1.1 为什么需要配置文件夹共享功能 1.2 配置文件夹共享 1.3 访问共享文件夹 1.4 配置取消 用户名和密码认证 二. windows server 2012防火墙配置 思维导图 一. 配置文件夹共享功能 1.1 为什么需要配置文件夹共享功能 我们在工作和生活中经…

JavaScript 学习笔记 对象属性 symbol 数组常用方法

JavaScript 学习笔记 目录 文章目录 JavaScript 学习笔记目录参考教程对象遍历对象元素保留原来顺序判断是否是空对象对象浅拷贝对象深拷贝对象的方法不能这样写成箭头函数&#xff0c;否则找不到title对象的方法这样写&#xff0c;才能找到title可选链 symbol 类型字符串字符…