插件------localForage(改进的离线存储)
插件地址 |
localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。
localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。
使用方法 |
数据API
| getItem | setItem | removeItem | clear |
从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。 | 将数据保存到离线仓库。 | 从离线仓库中删除 key 对应的值。 | 从数据库中删除所有的 key，重置数据库。 |
| getItem(key, successCallback) | setItem(key, value, successCallback) | removeItem(key, successCallback) | clear(successCallback) |
| length | key | keys | iterate |
| 获取离线仓库中的 key 的数量（即数据仓库的“长度”）。 | 根据 key 的索引获取其名 | 获取数据仓库中所有的 key。 | 迭代数据仓库中的所有 value/key 键值对。
|
| length(successCallback) | key(keyIndex, successCallback) | keys(successCallback) | iterate(iteratorCallback, successCallback) |
设置API
setDriver | config(options) |
| 若可用，强制设置特定的驱动。 默认情况下，localForage 按照以下顺序选择数据仓库的后端驱动：
如果你想强制使用特定的驱动，可以使用
| 设置 localForage 选项。在调用 localForage 前必先调用它，但可以在 localForage 被加载后调用。使用此方法设置的任何配置值都将保留，即使在驱动更改后，所以你也可以先调用 driver 要使用的首选驱动。与上面的 setDriver 的值格式相同。 name 数据库的名称。可能会在在数据库的提示中会出现。一般使用你的应用程序的名字。在 localStorage 中，它作为存储在 localStorage 中的所有 key 的前缀。 size 数据库的大小（以字节为单位）。现在只用于WebSQL。 默认值： storeName 数据仓库的名称。在 IndexedDB 中为 version 数据库的版本。将来可用于升级; 目前未使用。 description 数据库的描述，一般是提供给开发者的。 |
setDriver(driverName)setDriver([driverName, nextDriverName]) |
其他的API想深入了解,可以去官网查阅~~~
实际例子
getItem
从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。
localforage.getItem('somekey').then(function(value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});
// 回调版本：
localforage.getItem('somekey', function(err, value) {
// 当离线仓库中的值被载入时，此处代码运行
console.log(value);
});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);
});removeItem
从离线仓库中删除 key 对应的值。
localforage.removeItem('somekey').then(function() {
// 当值被移除后，此处代码运行
console.log('Key is cleared!');
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});clear
从数据库中删除所有的 key，重置数据库。
localforage.clear().then(function() {
// 当数据库被全部删除后，此处代码运行
console.log('Database is now empty.');
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});length
获取离线仓库中的 key 的数量（即数据仓库的“长度”）。
localforage.length().then(function(numberOfKeys) {
// 输出数据库的大小
console.log(numberOfKeys);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});key
根据 key 的索引获取其名
localforage.key(2).then(function(keyName) {
// key 名
console.log(keyName);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});keys
获取数据仓库中所有的 key。
localforage.keys().then(function(keys) {
// 包含所有 key 名的数组
console.log(keys);
}).catch(function(err) {
// 当出错时，此处代码运行
console.log(err);
});iterate
迭代数据仓库中的所有 value/key 键值对。
iteratorCallback 在每一个键值对上都会调用一次，其参数如下： 1. value 为值 2. key 为键名 3. iterationNumber 为迭代索引 - 数字
// 同样的代码，但使用 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);
});setDriver
若可用，强制设置特定的驱动。
// 强制设置 localStorage 为后端的驱动
localforage.setDriver(localforage.LOCALSTORAGE);
// 列出可选的驱动，以优先级排序
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);config
设置 localForage 选项。在调用 localForage 前必先调用它，但可以在 localForage 被加载后调用。
使用此方法设置的任何配置值都将保留，即使在驱动更改后，所以你也可以先调用 config() 再次调用 setDriver()。
// 将数据库从 “localforage” 重命名为 “Hipster PDA App”
localforage.config({
name: 'Hipster PDA App'
});
// 将强制使用 localStorage 作为存储驱动，即使其他驱动可用。
// 可用配置代替 `setDriver()`。
localforage.config({
driver: localforage.LOCALSTORAGE,
name: 'I-heart-localStorage'
});
// 配置不同的驱动优先级
localforage.config({
driver: [localforage.WEBSQL,
localforage.INDEXEDDB,
localforage.LOCALSTORAGE],
name: 'WebSQL-Rox'
});