localForage 是基于 indexedDB 封装的库，通过它我们可以简化 IndexedDB 的使用、 Vue 推荐使用 Pinia 管理 localForage

localForage 是基于 indexedDB 封装的库，通过它我们可以简化 IndexedDB 的使用。

官方中文文档 http://localforage.docschina.org

使用

1、下载

pnpm add localforage

2、创建一个 indexedDB

import localforage from 'localforage'

创建一个 indexedDB
const myIndexedDB = localforage.createInstance({
  name: 'myIndexedDB',
})

3、存值

myIndexedDB.setItem(key, value)

3、取值
由于indexedDB的存取都是异步的，建议使用 promise.then() 或 async/await 去读值

myIndexedDB.getItem('somekey').then(function (value) {
  // we got our value
}).catch(function (err) {
  // we got an error
});


// or

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

删除某项

myIndexedDB.removeItem('somekey')

重置数据库

myIndexedDB.clear()

Vue 推荐使用 Pinia 管理 localForage

如果你想使用多个数据库，建议通过 pinia 统一管理所有的数据库，这样数据的流向会更明晰，数据库相关的操作都写在 store 中，让你的数据库更规范化。

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