介绍
localForage是一个基于indexedDB封装的JavaScript库,它通过类似localStorage API的异步存储来改进Web应用程序的离线体验,通过它我们可以简化IndexedDB的使用。localForage可以存储多种类型的数据,而不仅仅是字符串,它具有优雅降级策略,如果浏览器不支持IndexedDB或WebSQL,则使用localStorage。它在所有主流浏览器中都可以使用,包括Chrome、Firefox、IE和Safari(包括Safari Mobile)。
实现原理
localForage的原理主要基于Web浏览器中的两种存储机制:LocalStorage和IndexedDB
localforage在使用LocalStorage进行数据存储时,会将数据转换为JSON格式,并将其存储在浏览器的LocalStorage中。这种方式适用于存储较小量的数据,例如用户的配置信息或简单的缓存数据。
当需要存储大量结构化数据时,localforage会自动选择使用IndexedDB进行存储。IndexedDB是一种基于对象存储的数据库,它提供了更高级的查询和索引功能,使开发人员能够更方便地对数据进行操作。
localforage的工作方式非常灵活,开发人员可以根据自己的需求选择存储数据的方式。例如,可以通过设置数据优先级来指定首选的存储方式,或者在运行时根据浏览器的支持情况自动选择存储方式。
如何使用
1、下载
import localforage from 'localforage'
2、创建一个indexedDB
const myIndexedDB = localforage.createInstance({
name: 'myIndexedDB'
})
3、存值
myIndexedDB.setItem('key', value)
4、取值
由于indexedDB的存取都是异步的,建议使用 promise.then() 或 async/await 去读值
myIndexedDB.getItem('somekey').then(function (value) {
// value
}).catch(function (err) {
// error
});
或者:
try {
const value = await myIndexedDB.getItem('key');
console.log(value);
} catch (err) {
console.log(err);
}
5、删除某项
myIndexedDB.removeItem('somekey')
6、清空存储数据
myIndexedDB.clear()
浏览器兼容性