侧边栏壁纸
博主头像
xuesheng博主等级

分享web知识,学习就是取悦自己!

  • 累计撰写 118 篇文章
  • 累计创建 14 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录

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

xuesheng
2023-09-18 / 0 评论 / 0 点赞 / 103 阅读 / 350 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-09-18,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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)

0

评论区