• indexDB & localForage


    一、前言

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

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

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

    二、indexedDB

    IndexedDB是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型对象)该 API 使用索引实现对数据的高性能搜索。IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。

    1.存取方便

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

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

    2.异步存取

    我相信你肯定会思考一个问题:localStorage如果存储内容多的话会消耗内存空间,会导致页面变卡。那么 IndexedDB 存储量过多的话会导致页面变卡吗?不会有太大影响,因为 IndexedDB 的读取和存储都是异步的,不会阻塞浏览器进程。

    3.庞大的存储量

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

    三、 localForage

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

    兼容性

    想必你一定很关注兼容性问题吧,我们可以看下 localStorage 与 indexedDB 兼容性比对,两者之间还是有一些小差距。

    但是你也不必太过担心,因为 localforage 已经帮你消除了这个心智负担,它有一个优雅降级策略,若浏览器不支持 IndexedDB 则使用 WebSQL ,如果不支持 WebSQL 则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。

    localForage 的使用

    import localforage from 'localforage'

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

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

    1. myIndexedDB.getItem('somekey').then(function (value) {
    2. // we got our value
    3. }).catch(function (err) {
    4. // we got an error
    5. });

    or

    1. try {
    2. const value = await myIndexedDB.getItem('key');
    3. // This code runs once the value has been loaded
    4. // from the offline store.
    5. console.log(value);
    6. } catch (err) {
    7. // This code runs if there were any errors.
    8. console.log(err);
    9. }
    1. 删除某项
    myIndexedDB.removeItem('key')
    1. 重置数据库
    myIndexedDB.clear()

    细节及其他使用方式请参考官方中文文档localforage.docschina.org/#localforag…

    VUE 推荐使用 Pinia 管理 localForage

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

    1. // store/indexedDB.ts
    2. import { defineStore } from 'pinia'
    3. import localforage from 'localforage'
    4. export const useIndexedDBStore = defineStore('indexedDB', {
    5. state: () => ({
    6. filesDB: localforage.createInstance({
    7. name: 'filesDB',
    8. }),
    9. usersDB: localforage.createInstance({
    10. name: 'usersDB',
    11. }),
    12. responseDB: localforage.createInstance({
    13. name: 'responseDB',
    14. }),
    15. }),
    16. actions: {
    17. async setfilesDB(key: string, value: any) {
    18. this.filesDB.setItem(key, value)
    19. },
    20. }
    21. })

    我们使用的时候,就直接调用 store 中的方法

    1. import { useIndexedDBStore } from '@/store/indexedDB'
    2. const indexedDBStore = useIndexedDBStore()
    3. const file1 = {a: 'hello'}
    4. indexedDBStore.setfilesDB('file1', file1)
  • 相关阅读:
    【FPGA的小娱乐】在tft显示屏上画X型
    【Cucumber】关于BDD自然语言自动化测试的语法总结
    java教师教学质量评估系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
    服务器怎么关闭防火墙
    常用的"小脚本"-json数据处理
    LaunchPad 市场的复苏,Penpad 成新兴生力军
    类似中国知网但是搜索英文文献的权威网站有哪些?
    Weblogic各版本历史
    OWT(Open WebRTC Toolkit) Server信令分析 (上)
    unity自定义着色器基础
  • 原文地址:https://blog.csdn.net/qq_44376306/article/details/132804672