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

  • Z时代
  • 2024-01-10
  • 分类：IT

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脱机存储数据。我们有以下框架的驱动程序：

  • AngularJS

  • Angular 4 and up

  • Backbone

  • Ember

  • Vue

  • NuxtJS

相关链接

  • github 地址：https://github.com/localForage/localForage

  • localForage 中文文档：https://www.wenjiangs.com/docs/localforage

以上是 localForage 改进版的本地缓存 轻松实现 Web 离线应用 的全部内容， 来源链接： utcz.com/p/232649.html

回到顶部