localForage 改进版的本地缓存 轻松实现 Web 离线应用 - 文章教程

localForage 改进版的本地缓存 轻松实现 Web 离线应用

发布于 2020-08-02 字数 6432 浏览 1792 评论 0

localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。

localForage 改进版的本地缓存 轻松实现 Web 离线应用

LocalForage 是 JavaScript 的一个快速而简单的存储库。通过简单地使用异步存储 IndexedDB 或 WebSQL,localForage 可以改善 Web 应用程序的脱机体验。localStorage,就像API

LocalForage 在没有 IndexedDB 或 WebSQL 支持的浏览器中使用 localStorage。

快速使用

要使用 localForage,只需将一个 JavaScript 文件放到页面中:

<script src="localforage/dist/localforage.js"></script>
<script>localforage.getItem('something', myCallback);</script>

安装

从 Github 上下载最新版,或者通过 npm 安装

npm install localforage

如何使用 localForage

Callbacks vs Promises

因为localForage使用异步存储,所以它有一个异步API,否则,它使用 本地存储API

LocalForage 有一个双 API,允许您使用节点样式的 Callbacks 和 Promises 。如果你不确定哪一个适合你,建议你使用 Promise。

下面是节点样式回调表单的一个示例:

localforage.setItem('key', 'value', function (err) {
  // if err is non-null, we got an error
  localforage.getItem('key', function (err, value) {
    // if err is non-null, we got an error. otherwise, value is the value
  });
});

Promise 方式

localforage.setItem('key', 'value').then(function () {
  return localforage.getItem('key');
}).then(function (value) {
  // we got our value
}).catch(function (err) {
  // we got an error
});

或者,使用 async / await

try {
    const value = await localforage.getItem('somekey');
    // This code runs once the value has been loaded
    // from the offline store.
    console.log(value);
} catch (err) {
    // This code runs if there were any errors.
    console.log(err);
}

存储BLOB、TypedArray和其他JS对象

您可以在 localForage 中存储任何类型;您不局限于字符串,比如localStorage。即使 localStorage 是您的存储后端,localForage也会自动执行 JSON.parse()JSON.stringify() 在获取/设置值时。

LocalForage 支持存储所有可以序列化为 JSON 的原生 JS 对象,以及 ArrayBuffers、BLOB 和 TypedArray。检查 API 文档有关区域设置支持的类型的完整列表。

每个存储后端都支持所有类型的存储,尽管本地存储中的存储限制使得存储许多大块变得不可能。

配置

属性设置数据库信息。config()方法。可用选项如下driver, name, storeName, version, size,和description

localforage.config({
    driver      : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
    name        : 'myApp',
    version     : 1.0,
    size        : 4980736, // Size of database, in bytes. WebSQL-only for now.
    storeName   : 'keyvaluepairs', // Should be alphanumeric, with underscores.
    description : 'some description'
});

注:你必须在你和你的数据交互调用 config() ,这意味着调用 config() 使用前 getItem(), setItem(), removeItem(), clear(), key(), keys()length()

多实例

可以使用以下方法创建指向不同存储区的多个localForage实例createInstance。使用的所有配置选项config是支持的。

var store = localforage.createInstance({
  name: "nameHere"
});

var otherStore = localforage.createInstance({
  name: "otherName"
});

// Setting the key on one of these doesn't affect the other.
store.setItem("key", "value");
otherStore.setItem("key", "value2");

RequireJS

define(['localforage'], function(localforage) {
    // As a callback:
    localforage.setItem('mykey', 'myvalue', console.log);

    // With a Promise:
    localforage.setItem('mykey', 'myvalue').then(console.log);
});

TypeScript

如果你有 allowSyntheticDefaultImports 编译器选项 设为 true 在你的 tsconfig.json 版本 1.8+ 中支持,您应该使用:

import localForage from "localforage";

否则,您应该使用以下内容之一:

import * as localForage from "localforage";
// or, in case that the typescript version that you are using
// doesn't support ES6 style imports for UMD modules like localForage
import localForage = require("localforage");

框架支持

如果使用列出的框架,框架中的模型有一个localForage存储驱动程序,这样就可以用localForage脱机存储数据。我们有以下框架的驱动程序:

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0