localForage 改进版的本地缓存 轻松实现 Web 离线应用
localForage 是一个 JavaScript 库,提升了应用程序的离线体验,通过使用异步的数据存储,提供简单的类似 localStorage 的 API,允许开发者存储多种类型数据。
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脱机存储数据。我们有以下框架的驱动程序:
相关链接
- github 地址:https://github.com/localForage/localForage
- localForage 中文文档:https://www.wenjiangs.com/docs/localforage
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论