前端本地存储数据库IndexedDB

前端本地存储数据库IndexedDB

  • 1、前言
  • 2、什么是 indexedDB?
  • 3、什么是 localForage?
  • 4、localForage 的使用
  • 5、VUE 推荐使用 Pinia 管理 localForage

1、前言

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

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

当我们的存储量比较大的时候,我们一定会想到我们的 indexedDB,让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储,然而 indexedDB 的使用是比较繁琐而复杂的,有一定的学习成本,但第三方库 localForage 的出现,让我们轻松无负担的在浏览器中使用 indexedDB
截止今天,localForagegithubstar 已经23.4k了,可以说 localForageindexedDB 算是相互成就了。

2、什么是 indexedDB?

通俗地说,IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。

IndexedDB 具有以下特点。

(1)键值对储存IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。

(2)异步IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。

(3)支持事务IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。

(4)同源限制IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

(5)储存空间大IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。

(6)支持二进制储存IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

3、什么是 localForage?

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

在这里插入图片描述

在这里插入图片描述

但是你也不必太过担心,因为 localforage 有一个降级策略,若浏览器不支持 IndexedDB 则使用 WebSQL ,如果不支持 WebSQL 则使用 localStorage。在所有主流浏览器中都可用:ChromeFirefoxIESafari(包括 Safari Mobile)。

4、localForage 的使用

localForage

  1. 下载并引入
// 下载
npm i localforage
or
pnpm add localforage// 引入
import localforage from 'localforage'
  1. 创建一个 indexedDB
const myIndexedDB = localforage.createInstance({name: 'myIndexedDB',
})
  1. 存值
myIndexedDB.setItem(key, value)
  1. 取值

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

5、VUE 推荐使用 Pinia 管理 localForage

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

// 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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152530.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派镜像安装 + 设置 + 镜像批量化操作 - 自动化烧写工具 (四)

简介 当需要大批量使用树莓派时, SD Card烧录过程中的重复和繁杂操作需要被工具给取代, AT Disk Imager这就出现了;软件介绍 实现监控读卡器,当SD Card接入读卡器时自动格式化、 烧写设定镜像、并自动软弹出设备;目前可设定参数: 1) 镜像文件, 烧录的镜…

[github配置] 远程访问仓库以及问题解决

作者:20岁爱吃必胜客(坤制作人),近十年开发经验, 跨域学习者,目前于新西兰奥克兰大学攻读IT硕士学位。荣誉:阿里云博客专家认证、腾讯开发者社区优质创作者,在CTF省赛校赛多次取得好成绩。跨领域…

MATLAB算法实战应用案例精讲-【神经网络】Transformer

目录 前言 算法原理 编码器 自注意力机制 从宏观视角看自注意力机制

Vue3 源码解读系列(九)——依赖注入

依赖注入 依赖注入用于祖先组件向后代组件传递数据。 特点: 祖先组件不需要知道哪些后代组件在使用它提供的数据。 后代组件也不需要知道注入的数据来自哪里。 /*** provide 的实现*/ function provide(key, value) {let provides currentInstance.provides // 当…

【LSTM】北京pm2.5 天气预测--pytorch版本,有代码可以跑通-LSTM回归问题,工程落地一网打尽

文章目录 前言1. 知识理解1.1 核心理解1.2 原理1.2.1 图解LSTM1.2.1 分词1.2.1 英语的词表示1.2.2 中文的词表示1.2.3 构建词表 2. 工程代码2.1 数据预处理2.2 数据集&模型构建2.3 模型训练2.4 保持模型&加载模型&预测 前言 LSTM 少分析原理,更强调工程…

网络渗透测试(TCP/IP)理论篇

TCP/IP体系 垂直服务:底层为高层服务 TCP/IP体系结构是一个分层的协议体系,由多个层次组成,每个层次都负责不同的功能。以下是TCP/IP体系结构的主要层次: 物理层(Physical Layer):该层负责传输…

Debian系列的Linux发行版上部署wvp

Debian系列的Linux发行版上部署wvp 环境搭建1.Debian系列的Linux发行版上安装nginx2.安装mysql设置mysql密码修改权限sudo mysql ERROR 1045 (28000): Access denied for user root@localhost (using password: NO)配置相关navicat 连接不上 报错 10061navicat 连接报错 1130 -…

Python选择排序和冒泡排序算法

选择排序和冒泡排序都是常见的排序算法。以下是这两种算法的Python实现: 选择排序(Selection Sort) 选择排序的基本思想是在未排序的序列中找到最小(或最大)元素,存放到排序序列的起始位置,然…

grafana面板介绍

grafana 快速使用 背景 随着公司业务的不断发展,紧接来的是业务种类的增加、服务器数量的增长、网络环境的越发复杂以及发布更加频繁,从而不可避免地带来了线上事故的增多,因此需要对服务器到应用的全方位监控,提前预警&#xf…

MATLAB | 官方举办的动图绘制大赛 | 第二周赛情回顾

今天带来一下MATHWORKS官方举办的迷你黑客大赛第三期(MATLAB Flipbook Mini Hack)的最新进展!!目前比赛已经进行了两周非常荣幸能够成为第一周的阶段性获奖者: 本来并不打算每周进行一次赛况讲解,但是由于字符限制改成了2000&…

何时使用Elasticsearch而不是MySql?

何时使用Elasticsearch而不是MySql? MySQL 和 Elasticsearch 是两种不同的数据管理系统,它们各有优劣,适用于不同的场景。本文将从以下几个方面对它们进行比较和分析: 数据模型查询语言索引和搜索分布式和高可用性能和扩展性使用…

Linux系统编程 day02 vim、gcc、库的制作与使用

Linux系统编程 day02 vim、gcc、库的制作与使用 01. vim0101. 命令模式下的操作0102. 切换到文本输入模式0103. 末行模式下的操作0104. vim的配置文件 02. gcc03. 库的制作与使用0301. 静态库的制作与使用0302. 动态库(共享库)的制作与使用 01. vim vim是一个编辑器&#xff0…

adb突然获取不到华为/荣耀手机。。。

手机一开始都是好好的,adb获取正常,adb执行命令正常。突然有一天不好使了。。。。。 重启、换usb线都试过。。。。。。 看到hisuite模式和adb冲突这篇帖子,尝试下载华为手机助手去链接,但一直连接不上。 最后我的处理方法是&#…

Run Legends将健身运动游戏化,使用户保持健康并了解Web3游戏

最近,我们有机会采访Talofa Games的首席执行官兼创始人Jenny Xu,一起讨论游戏开发,Talofa Games是Run Legends这款健身游戏的开发工作室。她已经创作了超过一百款游戏,对于推动游戏的可能性并将她的创造力和叙事技巧带入她最喜爱的…

代码随想录算法训练营Day36 —— 738.单调递增的数字

738.单调递增的数字 思路: 题目要求小于等于N的最大单调递增的整数,那么拿一个两位的数字来举例。 例如:98,一旦出现strNum[i - 1] > strNum[i]的情况(非单调递增),首先想让strNum[i - 1]…

POS系统完整体系的介绍 Pos终端主密钥MK、DUKPT、PEK、DEK、MEK、TUSN的含义 ---安全行业基础篇7

POS系统完整体系的介绍 销售点终端(POS机)是零售和服务行业中用于处理销售和交易的关键技术。POS系统不仅涉及支付处理,还包括库存管理、顾客关系管理、数据分析等多个方面。下面是POS系统完整体系的介绍: 1. 硬件组件 终端机&…

智能电销机器人好做吗?ai机器人有没有用?

电销机器人是基于深度神经学算法和卷积神经网络算法,将网络电话、语音识别、自然语言理解、多轮对话、知识图谱等多个门类集于一身的智能产品。不但能与客户智能交流,更能根据已经设定好的专业话术进行业务描述和问题解答,在电销行业是不可多…

leetcode数据结构与算法刷题(三)

目录 第一题 交叉链表 思想: 注意点 第一步先求两个链表的长度 第二步 让长的先走,当长短一样时一起走。 犯错点 第二题 判断是有环 思想: 注意 错误分享 第三题(重点面试题) 思路: 这题面试问题&a…

电子学会C/C++编程等级考试2022年06月(一级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:倒序输出 依次输入4个整数a、b、c、d,将他们倒序输出,即依次输出d、c、b、a这4个数。 时间限制:1000 内存限制:65536输入 一行4个整数a、b、c、d,以空格分隔。 0 < a,b,c,d < 108输出 一行4个整数d、c、b、a,整数之…

解决证书加密问题:OpenSSL与urllib3的兼容性与优化

在使用客户端证书进行加密通信时&#xff0c;用户可能会遇到一些问题。特别是当客户端证书被加密并需要密码保护时&#xff0c;OpenSSL会要求用户输入密码。这对于包含多个调用的大型会话来说并不方便&#xff0c;因为密码无法在连接的多个调用之间进行缓存和重复使用。用户希望…