北京城乡建设集团网站,沈阳网站设计制作公司,wordpress目录图片,兰州优化网站推广一、什么是 localForage
当我们的存储量比较大的时候#xff0c;我们一定会想到我们的 indexedDB#xff0c;让我们在浏览器中也可以
使用数据库这种形式来玩转本地化存储#xff0c;然而 indexedDB 的使用是比较繁琐而复杂的#xff0c;
有一定的学习成本#xff0c;但 …一、什么是 localForage
当我们的存储量比较大的时候我们一定会想到我们的 indexedDB让我们在浏览器中也可以
使用数据库这种形式来玩转本地化存储然而 indexedDB 的使用是比较繁琐而复杂的
有一定的学习成本但 localForage 的出现几乎抹平了这个缺陷让我们轻松无负担的在
浏览器中使用 indexedDB。localStorage如果存储内容多的话会消耗内存空间会导致页面变卡。
那么 IndexedDB 存储量过多的话会导致页面变卡吗不会有太大影响因为 IndexedDB 的读取和存储都是异步的不会阻塞浏览器进程。IndexedDB 的储存空间比LocalStorage 大得多一般可达到500M甚至没有上限。而localForage 是基于 indexedDB 封装的库通过它我们可以简化 IndexedDB 的使用。
若浏览器不支持 IndexedDB 或 WebSQL则使用 localStorage。在所有主流浏览器中都可用ChromeFirefoxIE 和 Safari包括 Safari Mobile。
二、localForage 的使用
1安装和引入
npm install localforage
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) {// we got our value
}).catch(function (err) {// we got an error
});
或者
try {const value await myIndexedDB.getItem(somekey);// This code runs once the value has been loaded// from the offline store.console.log(value);
} catch (err) {// This code runs if there were any errors.console.log(err);
} 5、删除
myIndexedDB.removeItem(somekey)
6、重置数据库
myIndexedDB.clear() VUE3 推荐使用 Pinia 管理 localForage
// store/indexedDB.ts
import { defineStore } from pinia
import localforage from localforageexport const useIndexedDBStore defineStore(indexedDB, {state: () ({filesDB: localforage.createInstance({name: filesDB,}),usersDB: localforage.createInstance({name: usersDB,}),responseDB: localforage.createInstance({name: responseDB,}),}),actions: {async setfilesDB(key: string, value: any) {this.filesDB.setItem(key, value)},}
}) 我们使用的时候就直接调用 store 中的方法
import { useIndexedDBStore } from /store/indexedDB
const indexedDBStore useIndexedDBStore()
const file1 {a: hello}
indexedDBStore.setfilesDB(file1, file1) 《完》
