什么是 localForage?
Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
localForage 是一个快速且简单的 JavaScript 存储库,其通过使用异步存储对例如:IndexedDB 、 WebSQL、localStorage 等进行简单的、强大的 API 包装来改善 Web 应用程序的离线体验。localForage 可以在不支持 IndexedDB 或 WebSQL 的浏览器中使用。
localForage GitHub地址:https://github.com/localForage/localForage
从 localForage v1.7.3 开始,localForage 添加到应用程序中的有效代码体积相当小,其使用 gzip 压缩提供服务,localForage 将为 Bundle 总大小增加不到 10k,如果使用 brotli'd 压缩算法后体积更加小,只有 7.8k。
同时,对于特定前端框架,localForage 还提供了存储驱动程序,开发者可以直接使用,比如:AngularJS、Angular 4、Backbone、Ember、Vue、NuxtJS 等等。
如何使用 localForage?
要使用 localForage,只需将下面的 JavaScript 文件添加到页面中即可:
<script src="localforage/dist/localforage.js"></script>
<script>localforage.getItem('something', myCallback);</script>
当然,也非常推荐开发者使用 async/await 的模式使用 localForage:
try {
const value = await localforage.getItem('somekey');
// 当从离线数据 store 获取到数据后调用
console.log(value);
} catch (err) {
// 抛出错误调用
console.log(err);
}
如果使用 Promise 的方法也非常简单:
localforage.setItem('key', 'value').then(function () {
return localforage.getItem('key');
}).then(function (value) {
// 获取到值
}).catch(function (err) {
// we got an error
});
同时,localForage 还提供了众多方法来对存储本身进行操作,比如:localforage.clear() 将删除离线 store 中的所有数据:
localforage.clear().then(function() {
// 数据删除后执行该方法
console.log('Database is now empty.');
}).catch(function(err) {
// 错误处理方法
console.log(err);
});
同时,还提供了 iterate 方法对离线存储 store 的数据进行迭代:
localforage.iterate(function(value, key, iterationNumber) {
// 迭代键值对,每个元素都会调用一次
console.log([key, value]);
}).then(function() {
console.log('Iteration has completed');
}).catch(function(err) {
// 错误处理方法
console.log(err);
});
localForage 还允许开发者调用 setDriver 选择特定的驱动,默认情况下按照 IndexedDB>WebSQL>localStorage 的优先级。比如下面的示例:
localforage.setDriver(localforage.LOCALSTORAGE);
// 强制使用 localStorage
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);
// 指定多个驱动
为您推荐
富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..
常见的10个问题#产品开发中常见的10个问题思维导图需求相关#1. 需求不明确#在日常工作中,需求来源于用户、老板、客户、竞品分析、业务部门、产品经理等,这些人或部门会提出需求,因为他们不是产品经理,提出的需求..
JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..
之前,笔者有分享过说我最喜欢的增长是可复制可持续的增长,它一般都会有三个关键过程:首先是小范围测试,低成本试错,也就是最小可行性验证,让ROI最大化。然后是把测试的最优结果整理为可执行的标准化化流程。前..
前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..
JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在ES5 规范中指出了指数位E的取值范围是[-1074, 971]。精度问题汇总想用有限..
继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。原型链首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细..
基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、focus……)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应..
编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试,我在下面定义了一个测试对象obj。测试对象// 为 Object 设置三个自定义属性(可枚举)Object.p..
技术学习要兼顾深度和广度夯实技术基础这么多年来,我面试了很多人。我越发感到「技术基础」非常重要。很多技术的本质是一样的。技术基础足够好的话,学东西可以非常快。往下到操作系统层面,甚至计算机硬件层面,你..
JavaScript开发人员倾向于寻找可用于机器学习模型训练的JavaScript框架。下面是一些机器学习算法,基于这些算法可以使用本文中列出的不同JavaScript框架来模型训练:简单的线性回归多变量线性回归逻辑回归朴素贝叶斯..
以下我们将为大家介绍 JavaScript 保留两位小数的实现方法:四舍五入以下处理结果会四舍五入:var num =2.446242342;num = num.toFixed(2); // 输出结果为 2.45不四舍五入以下处理结果不会四舍五入:第一种,先把小数边..
JavaScript 实现页面跳转重定向可以使用以下两种方法:window.location.replace("url")类似 HTTP 重定向将地址替换成新 url,该方法通过指定 URL 替换当前缓存在历史里(客户端)的项目,因此当使用 replace 方法之..
一、Mysql分表的原因1、当一张的数据达到几百万时,你查询一次所花的时间会变多,如果有联合查询的话,我想有可能会停在那儿了。分表的目的就在于此,减小数据库的负担,缩短查询时间。2、mysql中有一种机制是表锁定..
avascript 声明变量的时候,虽然用 var 关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的。可以正常运行的代码并不代表是合适的代码。var num = 1;是在当前域中声明变量。如果在方..
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解!先看明白下面:例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined例 2shows() // 盲僧 比较一下这两者 this 的差别,第一个打印里面的 this ..
在这篇文章中,我们将介绍一些用于AJAX调用的最好的JS库,包括jQuery,Axios和Fetch。欢迎查看代码示例!AJAX是用来对服务器进行异步HTTP调用的一系列web开发技术客户端框架。 AJAX即Asynchronous JavaScript and XM..
自学java没那么难一:个人经历我的大学:第一年泡在图书馆看杂七杂八的书,跟学习毫无关系。第二年疯狂打LOL,从白银打到黄铜(黄铜守门员)。第三年上半年,被某人点醒,学习了整套C#知识体系,某马。下半年又决定..
运作开源项目很容易。所有你需要做的就是让你的源代码可用和开源,对吧?嗯,也许。其实,开源项目是否成功取决于你对项目成功的定义。且不论你是怎么定义的,创建开源项目需要大量的工作。如果你已经有了目标,那么..
0.前言笔者在不足两年经验的时候从成都一家金融科技中厂跳槽到杭州阿里淘天集团,又于今年5月份从杭州淘天跳槽到成都字节。自认为自己在面试这方面有一点心得,处于记录和分享的目的便有了此文,此文纯主观,也许对3..