localForage 是一个快速而简单的 JavaScript 存储库。通过使用异步存储（IndexedDB 或 WebSQL）和简单的类 localStorage 的 API ，localForage 能改善 Web 应用的离线体验。localForage 有一个优雅降级策略,若浏览器不支持 IndexedDB 则使用 WebSQL ，如果不支持 WebSQL 则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。
IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象的数据库。
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器 LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
简单来说，IndexedDB 就是浏览器提供的本地数据库。
IndexedDB 具有以下特点
- 键值对储存
- 异步操作（避免锁死浏览器）
- 支持事务
- 同源限制（协议+域名+端口）
- 存储空间大
- 支持二进制存储（ArrayBuffer 对象和 Blob 对象，可存储文件数据）
localForage 的使用
- 下载
npm install localforageimport localforage from 'localforage'- 创建一个 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
});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.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)
