什么是 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]);
// 指定多个驱动
为您推荐
引言JavaScript 作为现代 Web 开发的核心语言,几乎无处不在——从简单的前端交互到复杂的 Node.js 后端应用。然而,正是这种广泛的应用使 JavaScript 成为攻击者的主要目标。本文旨在为开发者提供 10 个关键的安全..
什么是 OpenStockOpenStock 是由 Open Dev Society 社区发起与维护的一个开源项目,其目标是为开发者与普通用户提供一个无须付费即可访问、部署与扩展的股票市场观察平台。它可以作为一种“自行托管”的替..
引言作为一名独立开发者,我从零开始设计并开发了一款在线客服系统——升讯威在线客服与营销系统。从需求调研、功能设计到编码实现,我几乎独自承担了整个产品生命周期。在这个过程中,我深刻体会到一个问题:即便产..
随着数字绘画、像素艺术和游戏美术需求的提升,越来越多创作者希望使用免费、开源且功能强大的工具来进行创作。PixiEditor 就是一款旨在满足多种 2D 创作场景的开源图形编辑器,它不仅支持像素艺术(pixel art),还..
在现代 Web 开发中,富文本编辑器是构建内容管理系统、博客平台、在线文档和评论系统等应用程序的关键组件。选择合适的富文本编辑器可以提高开发效率,提升用户体验。本文将介绍五款在 2025 年备受推崇的开源富文本..
前端的 cookie 读写在 2020 年之前一直不存在一个官方的接口,每次需要使用 cookie 的时候,要么是引入三方插件,要么就需要自己封装一个公用的组件或函数。npm 的 cookie 插件周下载量 6 千万左右,可以想象一下此..
在 ES6 之前,JS 的多行字符串一直是开发难题,在处理多行字符串时,各种各样的方案都有~~在 JS 中,如果直接这样写多行字符串:const str1 = '第一行第二行';那浏览器转过来就打脸,分分钟报错:Uncaught S..
此 对象 非彼对象啊,不要理解错了哦~~面向对象编程 这个概念在 Java 编程语言中用得比较多,JS 同时支持 面向对象编程 和 函数式编程。像大名鼎鼎的 React 和 Vue 他们都有两种开发风格,比如:Vue 中的 组合式API ..
在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。如果说程序如同万丈高楼平地起,那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼,不同的人,用相同的原料,造的方法也会有千般变..
在现代Web开发中,提供图片上传的预览功能以及获取图片的尺寸和大小信息,已成为提升用户体验的重要手段。本文将详细介绍如何使用JavaScript实现这些功能,帮助你在用户上传图片前进行有效的验证和优化。一、实现图..
数组可以算是程序里面最常用的数据结构了,但凡网页上任何一个列表数据,基本都是以数组的形式存在,像表格、banner图、菜单列表、商品列表,分类列表等等,在前端领域都是以数组处理。数组的定义JS 的数组花样很多..
JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。启用严格模式1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声..
任何一门编程语言,在学习之前都应该先弄清楚它的调试方法,毕竟没有不挖坑的人类!程序一旦出现问题,第一时间就是找到问题出在哪儿,其次才是拿出解决办法。如果都找不到问题原因,那又何从谈起解决办法呢?如何排..
截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。那么咱们接下来看看 Java..
GitHub上有很多开源项目如 VeighNa(原 vn.py)、Abu量化 、RD-Agent 等提供了丰富的功能,包括多市场支持、策略回测和实盘交易接口,降低了量化交易的入门门槛。本文将为大家介绍几款GitHub上的爆款量化神器,希望..
富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..
常见的10个问题#产品开发中常见的10个问题思维导图需求相关#1. 需求不明确#在日常工作中,需求来源于用户、老板、客户、竞品分析、业务部门、产品经理等,这些人或部门会提出需求,因为他们不是产品经理,提出的需求..
JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..
之前,笔者有分享过说我最喜欢的增长是可复制可持续的增长,它一般都会有三个关键过程:首先是小范围测试,低成本试错,也就是最小可行性验证,让ROI最大化。然后是把测试的最优结果整理为可执行的标准化化流程。前..
前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..