前端存储使用localForage代替localStorage-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端存储使用localForage代替localStorage。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

localForage介绍

localForage是一个JavaScript库，能够类似localStorage的存储。
他是异步存储，可以优化你的web应用程序的离线体验，而且能存储多种类型的数据。
支持es6的 Promises API,而且支持添加回调函数。

安装localForage

npm install localforage

引入localForage

安装成功后，即可在项目中使用，这里以vue为例：

import localForage from "localforage";

使用localForage

与localStorage大致相同：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
但由于是异步，一般使用then，catch。文章来源地址https://www.toymoban.com/news/detail-559772.html

//1：存普通数据
localforage.setItem('somekey', 'some value').then(function (value) {
    // 当值被存储后，可执行其他操作
    console.log(value);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});
//2：存一个数组
localforage.setItem('myarray', [1, 2, 'three']).then(function(value) {
    // 如下输出 `1`
    console.log(value[0]);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});
//3：async/await
try {
    //await返回结果值，用一个常量接收
    const value = await localforage.getItem('somekey');
    console.log(value);
} catch (err) {
    console.log(err);
}
//取值
localforage.getItem('somekey').then(function(value) {
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});

常用属性

REMOVEITEM:删除key对应的值。
CLEAR：删除所有的key，并且重置数据库。
LENGTH:获取仓库中key的长度。
keys：获取数据仓库中所有的key。
iterate:迭代数据库中所有的键值对，如果有一个value是undefined，就会推出，并且将该键传入成功回调内。

//1：removeItem示例
localforage.removeItem('somekey').then(function() {
    // 当值被移除后，此处代码运行
    console.log('Key is cleared!');
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});
//2: clear示例
localforage.clear().then(function() {
    // 当数据库被全部删除后，此处代码运行
    console.log('Database is now empty.');
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});
//3:length示例
localforage.length().then(function(numberOfKeys) {
    // 输出数据库的大小
    console.log(numberOfKeys);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});
//4:keys示例
localforage.keys().then(function(keys) {
    // 包含所有 key 名的数组
    console.log(keys);
}).catch(function(err) {
    // 当出错时，此处代码运行
    console.log(err);
});
//5:iterate示例
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);
});