1.什么是localForage
localForage 是一个 JavaScript 库，通过简单类似?localStorage?API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。
localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。
localForage 提供回调 API 同时也支持?ES6 Promises API，你可以自行选择。
2.安装使用localForage
使用 localForage，请?下载最新版本?或使用?npm（npm install localforage）或?bower（bower install localforage）进行安装。
然后，只需包含 JS 文件即可使用 localForage：<script src="localforage.js"></script>。你不需要运行任何初始化方法或等待?onready?事件。
# 通过 npm 安装：
npm install localforage
# 或通过 bower：
bower install localforage
<script src="localforage.js"></script>
<script>console.log('localforage is: ', localforage);</script>
3.localForage的使用
GETITEM
localforage.getItem('somekey').then(function(value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
// 回调版本：
localforage.getItem('somekey', function(err, value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
});
getItem(key, successCallback)
从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem()?将返回?null。
?当存储?undefined?时，?getItem()?也会返回?null。由于?localStorage 限制，同时出于兼容性的原因 localForage 无法存储?undefined。
SETITEM
localforage.setItem('somekey', 'some value').then(function (value) {
// 当值被存储后，可执行其他操作
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
// 不同于 localStorage，你可以存储非字符串类型
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
// 如下输出 `1`
console.log(value[0]);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
// 你甚至可以存储 AJAX 响应返回的二进制数据
req = new XMLHttpRequest();
req.open('GET', '/photo.jpg', true);
req.responseType = 'arraybuffer';
req.addEventListener('readystatechange', function() {
if (req.readyState === 4) { // readyState 完成
localforage.setItem('photo', req.response).then(function(image) {
// 如下为一个合法的 <img> 标签的 blob URI
var blob = new Blob([image]);
var imageURI = window.URL.createObjectURL(blob);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
}
});
setItem(key, value, successCallback)
将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象：
ArrayArrayBufferBlobFloat32ArrayFloat64ArrayInt8ArrayInt16ArrayInt32ArrayNumberObjectUint8ArrayUint8ClampedArrayUint16ArrayUint32ArrayString
?当使用 localStorage 和 WebSQL 作为后端时，二进制数据在保存（和检索）之前会被序列化。在保存二进制数据时，序列化会导致大小增大。
示例
REMOVEITEM
localforage.removeItem('somekey').then(function() {
// 当值被移除后，此处代码运行
console.log('Key is cleared!');
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
removeItem(key, successCallback)
从离线仓库中删除 key 对应的值。
示例
CLEAR
localforage.clear().then(function() {
// 当数据库被全部删除后，此处代码运行
console.log('Database is now empty.');
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
clear(successCallback)
从数据库中删除所有的 key，重置数据库。
localforage.clear()?将会删除离线仓库中的所有值。谨慎使用此方法。
LENGTH
localforage.length().then(function(numberOfKeys) {
// 输出数据库的大小
console.log(numberOfKeys);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
length(successCallback)
获取离线仓库中的 key 的数量（即数据仓库的“长度”）。
KEY
localforage.key(2).then(function(keyName) {
// key 名
console.log(keyName);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
key(keyIndex, successCallback)
根据 key 的索引获取其名
?虽然是从 localStorage API 延续而来的，但此方法被认为有点怪异。
KEYS
localforage.keys().then(function(keys) {
// 包含所有 key 名的数组
console.log(keys);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
keys(successCallback)
获取数据仓库中所有的 key。
ITERATE
// 同样的代码，但使用 ES6 Promises
localforage.iterate(function(value, key, iterationNumber) {
// 此回调函数将对所有 key/value 键值对运行
console.log([key, value]);
}).then(function() {
console.log('Iteration has completed');
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
// 提前退出迭代：
localforage.iterate(function(value, key, iterationNumber) {
if (iterationNumber < 3) {
console.log([key, value]);
} else {
return [key, value];
}
}).then(function(result) {
console.log('Iteration has completed, last iterated pair:');
console.log(result);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
iterate(iteratorCallback, successCallback)
迭代数据仓库中的所有 value/key 键值对。
iteratorCallback?在每一个键值对上都会调用一次，其参数如下： 1. value 为值 2. key 为键名 3. iterationNumber 为迭代索引 - 数字
?通过在?iteratorCallback?回调函数中返回一个非?undefined?的值，能提前退出?iterate。iteratorCallback?的返回值即作为整个迭代的结果，将被传入?successCallback。
这意味着如果你使用的是 CoffeeScript，那么你需要手动执行一个不带内容的?return?语句才能继续迭代所有的 key/value 键值对。
|