localForage使用IndexedDB/WebSQL存储

一、什么是 localForage 当我们的存储量比较大的时候，我们一定会想到我们的 indexedDB，让我们在浏览器中也可以 使用数据库这种形式来玩转本地化存储，然而 indexedDB 的使用是比较繁琐而复杂的， 有一定的学习成本，但 localForage 的出现几乎抹平了这个缺陷，让我们轻松无负担的在 浏览器中使用 indexedDB。 localStorage如果存储内容多的话会消耗内存空间，会导致页面变卡。 那么 IndexedDB 存储量过多的话会导致页面变卡吗？ 不会有太大影响，因为 IndexedDB 的读取和存储都是异步的，不会阻塞浏览器进程。 IndexedDB 的储存空间比LocalStorage 大得多，一般可达到500M，甚至没有上限。 而localForage 是基于 indexedDB 封装的库，通过它我们可以简化 IndexedDB 的使用。

若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 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 'localforage' export 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)

 《完》