前言

目前使用率最高的当之无愧为Web Storage API，也就是localStorage和sessionStorage，API简单，读取效率高。然后是indexedDB，但大部分时间是存在于八股文和面试题中。indexedDB的优势为存储空间大，且支持各种数据结构，性能也没有问题。之所以不为重用，是因为indexedDB的API多、长且纷杂。另外，前端使用数据库还需要了解一些表、游标、事务等一些概念，对于不了解后端的同学来说上手成本也就高出localStorage太多。所以，在5M内的存储领域，indexedDB并非首选。另外WebSQL已被H5标准放弃，而元老级的Cookie也不再适合现代的客户端存储任务。

那么有没有一个既保留indexedDB优点，上手又简单的方法呢，答案就是封装js库，localforage就是一个比较成熟的方案，localForage 是基于 indexedDB 封装的库，通过它我们可以简化 IndexedDB 的使用。

对于其兼容性不必太过担心，因为 localforage 已经帮你消除了这个心智负担，它有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

localForage 简单使用

1、下载安装

npm install localforage

2、引入包

import localforage from 'localforage'

3、简单使用

创建一个 indexedDB

const myIndexedDB = localforage.createInstance({
  name: 'myIndexedDB',
})

存值

myIndexedDB.setItem(key, value)

取值

由于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

// store/indexedDB.js
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)

参考文档

localForage 中文文档：http://localforage.docschina.org (opens new window)