对不起 localStorage,现在我爱上 localforage了!

前言

前端本地化存储算是一个老生常谈的话题了,我们对于 cookies、Web Storage(sessionStorage、localStorage)的使用已经非常熟悉,在面试与实际操作之中也会经常遇到相关的问题,但这些本地化存储的方式还存在一些缺陷,比较明显的缺点如下:

  1. 存储量小:即使是web storage的存储量最大也只有 5M
  2. 存取不方便:存入的内容会经过序列化,当存入非字符串的时候,取值的时候需要通过反序列化。

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

什么是 indexedDB

IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象)。

存取方便

IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许你存储和检索用键索引的对象;可以存储结构化克隆算法支持的任何对象。

之前我们使用 webStorage 存储对象或数组的时候,还需要先经过先序列化为字符串,取值的时候需要经过反序列化,那indexedDB就比较完美的解决了这个问题,可以轻松存取对象或数组等结构化克隆算法支持的任何对象。

stackblitz.com/ 网站为例,我们来看看对象存到 indexedDB 的表现

异步存取

我相信你肯定会思考一个问题:localStorage如果存储内容多的话会消耗内存空间,会导致页面变卡。那么 IndexedDB 存储量过多的话会导致页面变卡吗?

不有太大影响,因为 IndexedDB 的读取和存储都是异步的。

庞大的存储量

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

But.....关于 indexedDB 的介绍就到此为止,详细使用再次不再赘述,因为本篇文章我重点想介绍的是 localforage!

什么是 localforage

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

localforage 的使用

  1. 下载
js 复制代码
import localforage from 'localforage'

  1. 创建一个 indexedDB
js 复制代码
const myIndexedDB = localforage.createInstance({
  name: 'myIndexedDB',
})
  1. 存值
js 复制代码
myIndexedDB.setItem(key, value)
  1. 取值

由于indexedDB的存取都是异步的,建议使用 promise.then() 或 async/await 去读值

js 复制代码
myIndexedDB.getItem('somekey').then(function (value) {
  // we got our value
}).catch(function (err) {
  // we got an error
});

or

js 复制代码
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);
}
  1. 删除某项
js 复制代码
myIndexedDB.removeItem('somekey')
  1. 重置数据库
js 复制代码
myIndexedDB.clear()

以上是本人比较常用的方式,细节及其他使用方式请参考官方中文文档localforage.docschina.org/#localforag...

VUE 推荐使用 Pinia 管理 localforage

如果你想使用多个数据库,建议通过 pinia 统一管理所有的数据库,这样数据的流向会更明晰,数据库相关的操作都写在 store 中,让你的数据库更规范化。

ts 复制代码
// 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 中的方法

ts 复制代码
import { useIndexedDBStore } from '@/store/indexedDB'
const indexedDBStore = useIndexedDBStore()
const file1 = {a: 'hello'}
indexedDBStore.setfilesDB('file1', file1)

后记

以上就是本篇文章的所有内容,感谢观看,欢迎留言讨论。

相关推荐
今天不要写bug3 分钟前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
上优5 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k100866 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐6 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
Zz_waiting.7 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
一只小风华~10 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育