localForage使用 IndexedDB / WebSQL存储

本文介绍: 若浏览器不支持 Ind exe dDB 或 We bSQL，则使用 localSt ora g e。在所有主流浏览器中都可用：Chrom e，Fi refox，IE 和 Sa fari（包括 Safar i Mobile）。1，安装和引入2、创建一个 index e dDB3、存储4、取值（由于index e dDB的存取都是异步的，建议使用 promise.then() 或 async/await 去读值）或者 5、删除6、重置数据库我们使用的时候，就直接调用 store 中

一、什么是 localFora g e

当我们的存储量比较大的时候，我们一定会想到我们的 indexedDB，让我们在浏览器中也可以
使用数据库这种形式来玩转本地化存储，然而 indexedDB 的使用是比较繁琐而复杂的，
有一定的学习成本，但 localForage 的出现几乎抹平了这个缺陷，让我们轻松无负担的在
浏览器中使用 indexedDB。

localStorage如果存储内容多的话会消耗内存空间，会导致页面变卡。
那么 IndexedDB 存储量过多的话会导致页面变卡吗？

不会有太大影响，因为 IndexedDB 的读取和存储都是异步的，不会阻塞浏览器进程。

IndexedDB 的储存空间比LocalStorage 大得多，一般可达到500M，甚至没有上限。

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

若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Fi refox，IE 和 Safar i（包括 Safar i 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)