前端存储使用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。

//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);
});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！