Web前端Vue离线存储之 - localForage.js使用方法
# 前言
目前使用率最高的当之无愧为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',
})
2
3
存值
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
});
2
3
4
5
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);
}
2
3
4
5
6
7
8
9
删除某项
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)
},
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
我们使用的时候,就直接调用 store 中的方法
import { useIndexedDBStore } from '@/store/indexedDB'
const indexedDBStore = useIndexedDBStore()
const file1 = {a: 'hello'}
indexedDBStore.setfilesDB('file1', file1)
2
3
4
# 参考文档
localForage 中文文档:http://localforage.docschina.org (opens new window)
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13