首页 程序笔记 快速简单的开源JavaScript存储库localForage使用方法

快速简单的开源JavaScript存储库localForage使用方法

什么是 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]);
// 指定多个驱动

站星网

什么是 localForage? Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a sim..

为您推荐

JavaScript 中的安全编码:10 个关键实践

引言JavaScript 作为现代 Web 开发的核心语言,几乎无处不在——从简单的前端交互到复杂的 Node.js 后端应用。然而,正是这种广泛的应用使 JavaScript 成为攻击者的主要目标。本文旨在为开发者提供 10 个关键的安全..

OpenStock:开源免费股票市场追踪平台及其安装使用指南

什么是 OpenStockOpenStock 是由 Open Dev Society 社区发起与维护的一个开源项目,其目标是为开发者与普通用户提供一个无须付费即可访问、部署与扩展的股票市场观察平台。它可以作为一种“自行托管”的替..

独立开发经验谈:用视频快速讲解你的产品核心竞争力

引言作为一名独立开发者,我从零开始设计并开发了一款在线客服系统——升讯威在线客服与营销系统。从需求调研、功能设计到编码实现,我几乎独自承担了整个产品生命周期。在这个过程中,我深刻体会到一个问题:即便产..

深入解析 PixiEditor:开源 2D 图形编辑器的功能与使用教程

随着数字绘画、像素艺术和游戏美术需求的提升,越来越多创作者希望使用免费、开源且功能强大的工具来进行创作。PixiEditor 就是一款旨在满足多种 2D 创作场景的开源图形编辑器,它不仅支持像素艺术(pixel art),还..

2025 年最受欢迎的开源富文本编辑器推荐:功能强大、易于集成的选择

在现代 Web 开发中,富文本编辑器是构建内容管理系统、博客平台、在线文档和评论系统等应用程序的关键组件。选择合适的富文本编辑器可以提高开发效率,提升用户体验。本文将介绍五款在 2025 年备受推崇的开源富文本..

Web前端入门第 81 问:JavaScript cookie 的读写操作

前端的 cookie 读写在 2020 年之前一直不存在一个官方的接口,每次需要使用 cookie 的时候,要么是引入三方插件,要么就需要自己封装一个公用的组件或函数。npm 的 cookie 插件周下载量 6 千万左右,可以想象一下此..

Web前端入门第 78 问:JavaScript 比较少见的模版字符串用法

在 ES6 之前,JS 的多行字符串一直是开发难题,在处理多行字符串时,各种各样的方案都有~~在 JS 中,如果直接这样写多行字符串:const str1 = '第一行第二行';那浏览器转过来就打脸,分分钟报错:Uncaught S..

Web前端入门第 67 问:JavaScript 中的面向对象编程

此 对象 非彼对象啊,不要理解错了哦~~面向对象编程 这个概念在 Java 编程语言中用得比较多,JS 同时支持 面向对象编程 和 函数式编程。像大名鼎鼎的 React 和 Vue 他们都有两种开发风格,比如:Vue 中的 组合式API ..

Web前端入门第 57 问:JavaScript 数据类型与类型转换

在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。如果说程序如同万丈高楼平地起,那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼,不同的人,用相同的原料,造的方法也会有千般变..

JavaScript实现图片上传预览及获取图片尺寸和大小的完整指南

在现代Web开发中,提供图片上传的预览功能以及获取图片的尺寸和大小信息,已成为提升用户体验的重要手段。本文将详细介绍如何使用JavaScript实现这些功能,帮助你在用户上传图片前进行有效的验证和优化。一、实现图..

Web前端入门第 60 问:JavaScript 各种数组定义与数组取值方法

数组可以算是程序里面最常用的数据结构了,但凡网页上任何一个列表数据,基本都是以数组的形式存在,像表格、banner图、菜单列表、商品列表,分类列表等等,在前端领域都是以数组处理。数组的定义JS 的数组花样很多..

Web前端入门第 55 问:JavaScript 严格模式与非严格模式区别

JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。启用严格模式1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声..

Web前端入门第 53 问:JavaScript 的各种调试方法

任何一门编程语言,在学习之前都应该先弄清楚它的调试方法,毕竟没有不挖坑的人类!程序一旦出现问题,第一时间就是找到问题出在哪儿,其次才是拿出解决办法。如果都找不到问题原因,那又何从谈起解决办法呢?如何排..

Web前端入门第 52 问:JavaScript 的应用领域

截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。那么咱们接下来看看 Java..

GitHub爆款开源 AI 股票量化交易工具推荐

GitHub上有很多开源项目如 VeighNa(原 vn.py)、Abu量化 、RD-Agent 等提供了丰富的功能,包括多市场支持、策略回测和实盘交易接口,降低了量化交易的入门门槛。本文将为大家介绍几款GitHub上的爆款量化神器,希望..

.NET C# 过滤从富文本编辑器html里的Javascript脚本

富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..

软件产品开发中常见的10个问题及处理方法

常见的10个问题#产品开发中常见的10个问题思维导图需求相关#1. 需求不明确#在日常工作中,需求来源于用户、老板、客户、竞品分析、业务部门、产品经理等,这些人或部门会提出需求,因为他们不是产品经理,提出的需求..

轻松学习 JavaScript函数中的默认参数

JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..

一个提升运营/营销转化率的万能方法!

之前,笔者有分享过说我最喜欢的增长是可复制可持续的增长,它一般都会有三个关键过程:首先是小范围测试,低成本试错,也就是最小可行性验证,让ROI最大化。然后是把测试的最优结果整理为可执行的标准化化流程。前..

JavaScript API 设计原则详解

前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..

发表回复

返回顶部

微信分享

微信分享二维码

扫描二维码分享到微信或朋友圈

链接已复制
蜂鸟影院2048影视资源论坛熊猫影视河马影视星辰影视萝卜影院八哥电影网人人看电影无忧影视网橙子影视网叮当影视网天天影视网青青影视网电影天堂开心追剧网西瓜影院麻花影视网70影视网年钻网茶小舍电影藏影堂新神州影域煮酒观影体积影视爱看影院星光电影至尊影院极影公社超清视界