一、什么是 localForage

當(dāng)我們的存儲量比較大的時(shí)候，我們一定會想到我們的 indexedDB，讓我們在瀏覽器中也可以
使用數(shù)據(jù)庫這種形式來玩轉(zhuǎn)本地化存儲，然而 indexedDB 的使用是比較繁瑣而復(fù)雜的，
有一定的學(xué)習(xí)成本，但 localForage 的出現(xiàn)幾乎抹平了這個(gè)缺陷，讓我們輕松無負(fù)擔(dān)的在
瀏覽器中使用 indexedDB。localStorage如果存儲內(nèi)容多的話會消耗內(nèi)存空間，會導(dǎo)致頁面變卡。
那么 IndexedDB 存儲量過多的話會導(dǎo)致頁面變卡嗎？不會有太大影響，因?yàn)?IndexedDB 的讀取和存儲都是異步的，不會阻塞瀏覽器進(jìn)程。IndexedDB 的儲存空間比LocalStorage 大得多，一般可達(dá)到500M，甚至沒有上限。而localForage 是基于 indexedDB 封裝的庫，通過它我們可以簡化 IndexedDB 的使用。

若瀏覽器不支持 IndexedDB 或 WebSQL，則使用 localStorage。在所有主流瀏覽器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

二、localForage 的使用

1，安裝和引入

npm install localforage

import localforage from 'localforage'

2、創(chuàng)建一個(gè) 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、重置數(shù)據(jù)庫

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)},}
})

?我們使用的時(shí)候，就直接調(diào)用 store 中的方法

import { useIndexedDBStore } from '@/store/indexedDB'
const indexedDBStore = useIndexedDBStore()
const file1 = {a: 'hello'}
indexedDBStore.setfilesDB('file1', file1)

?《完》