页面缓存离线存储技术localforage(介绍篇)

Posted 2020-12-01 caominjie

改进的离线存储

localForage 是一个 javascript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

localForage 提供回调 API 同时也支持 ES6 Promises API，你可以自行选择。

安装

使用 localForage，请 下载最新版本 或使用 npm（npm install localforage）或 bower（bower install localforage）进行安装。

然后，只需包含 JS 文件即可使用 localForage：。你不需要运行任何初始化方法或等待 onready 事件。

API数据

GETITEM

getItem(key, successCallback)

从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。

** 当存储 undefined 时， getItem() 也会返回 null。由于 localStorage 限制，同时出于兼容性的原因 localForage 无法存储 undefined。

SETITEM

setItem(key, value, successCallback)

将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象：

. Array
. ArrayBuffer
. Blob
. Float32Array
. Float64Array
. Int8Array
. Int16Array
. Int32Array
. Number
. Object
. Uint8Array
. Uint8ClampedArray
. Uint16Array
. Uint32Array
. String

** 当使用 localStorage 和 WebSQL 作为后端时，二进制数据在保存（和检索）之前会被序列化。在保存二进制数据时，序列化会导致大小增大。

REMOVEITEM

removeItem(key, successCallback)

从离线仓库中删除 key 对应的值。

CLEAR

clear(successCallback)

从数据库中删除所有的 key，重置数据库。

localforage.clear() 将会删除离线仓库中的所有值。谨慎使用此方法。

LENGTH

length(successCallback)

获取离线仓库中的 key 的数量（即数据仓库的“长度”）。

KEY

key(keyIndex, successCallback)

根据 key 的索引获取其名

** 虽然是从 localStorage API 延续而来的，但此方法被认为有点怪异。

KEYS

keys(successCallback)

获取数据仓库中所有的 key。

ITERATE

iterate(iteratorCallback, successCallback)

迭代数据仓库中的所有 value/key 键值对。

iteratorCallback 在每一个键值对上都会调用一次，其参数如下： 1. value 为值 2. key 为键名 3. iterationNumber 为迭代索引 - 数字

** 通过在 iteratorCallback 回调函数中返回一个非 undefined 的值，能提前退出 iterate。iteratorCallback 的返回值即作为整个迭代的结果，将被传入 successCallback。

这意味着如果你使用的是 CoffeeScript，那么你需要手动执行一个不带内容的 return 语句才能继续迭代所有的 key/value 键值对。