正文 

当前位置： 首页 > 代码 > java教程

#yyds干货盘点#聊一聊indexeddb

尼羲 尼羲     2022-12-02     527

关键词：

Indexed Database API简称IndexedDB，是浏览器中存储结构化数据的一个方案。IndexedDB背后的思想是创造一套API，方便JavaScript对象的存储和获取，同时也支持查询和搜索。

IndexedDB是类似于MySQL或Web SQL Database的数据库。与传统数据库最大的区别在于，IndexedDB使用对象存储而不是表格保存数据。IndexedDB数据库就是在一个公共命名空间下的一组对象存储，类似于NoSQL风格的实现。既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexedDB 是没有存储上限的（一般来说不会小于 250M）。


1.IndexedDB的特点

  • 键值对储存。

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


  • 异步

IndexedDB的设计几乎完全是异步的。为此，大多数操作以请求的形式执行，这些请求会异步执行，产生成功的结果或错误。绝大多数IndexedDB操作要求添加onerror和onsuccess事件处理程序来确定输出。IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 localStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。


  • 支持事务。

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


  • 同源限制

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


  • 储存空间大

IndexedDB 的储存空间比 localStorage 大得多，一般来说不少于 250MB，甚至没有上限。


  • 支持二进制储存。

IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。


2.IndexedDB 使用流程

在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式。

接下来，通过一个基本的 IndexedDB 使用流程，旨在对 IndexedDB 形成一个感性的认知：

  • 打开/创建一个 IndexedDB 数据库（当该数据库不存在时，open 方法会直接创建一个名为 admin 新数据库）
// 后面的回调中，我们可以通过event.target.result拿到数据库实例
  let db
  // 参数1位数据库名，参数2为版本号
  const request = window.indexedDB.open("admin", 1)
  // 使用IndexedDB失败时的监听函数
  request.onerror = function(event) 
     console.log(无法使用IndexedDB)
   
  // 成功
  request.onsuccess  = function(event)
    // 此处就可以获取到db实例
    db = event.target.result
    console.log("你打开了IndexedDB")
  • 创建一个 object store（object store 对标到数据库中的“表”单位）
// onupgradeneeded事件会在初始化数据库/版本发生更新时被调用，我们在它的监听函数中创建object store
request.onupgradeneeded = function(event)
  let objectStore
  // 如果同名表未被创建过，则新建test表
  if (!db.objectStoreNames.contains(test)) 
    objectStore = db.createObjectStore(test,  keyPath: id )
  • 构建一个事务来执行一些数据库操作，像增加或提取数据等
// 创建事务，指定表格名称和读写权限
  const transaction = db.transaction(["test"],"readwrite")
  // 拿到Object Store对象
  const objectStore = transaction.objectStore("test")
  // 向表格写入数据
  objectStore.add(id: 1, name: juejin)
  • 通过监听正确类型的事件以等待操作完成。
// 操作成功时的监听函数
  transaction.oncomplete = function(event) 
    console.log("操作成功")
  
  // 操作失败时的监听函数
  transaction.onerror = function(event) 
    console.log("这里有一个Error")

#yyds干货盘点#聊一聊前端架构

什么是好架构好的代码和差的代码都能运行，但我们会追求好的代码，获得更好的维护性和可读性。同理没有架构的系统也能工作，但如果一个业务团队没有好的架构，整个团队将陷入混乱，最终难以支撑业务快速变化。架构是... 查看详情

#yyds干货盘点#前端存储之indexdb

...见肘，其实浏览器是有提供大数据量的本地存储的如​​IndexedDB​​存储数据大小一般在​​250M​​以上。弥补了​​localStorage​​​容量的缺陷，但是使用要比​​l 查看详情

#yyds干货盘点#docker安装方法

搜索镜像​​dockersearchzentao​​下载镜像​​dockerpulleasysoft/zentao​​创建容器#1.宿主机创建目录，用于映射禅道数据mkdir-p/data/zentao/zentaopmsmkdir-p/data/zentao/mysqldata#修改目录权限chown-R33:33/data/zentao/zentaopmschown-R101:101/data 查看详情

#yyds干货盘点#array.groupby()

array.groupBy()假设我们有一个产品列表，其中每个产品都是一个具有2个属性的对象: ​​name​​ 和 ​​category​​。constproducts=[name:apples,category:fruits,name:oranges,category:fruits,name:potatoes,category:vegetables];在上面的示例 查看详情

#yyds干货盘点#xssvscsrf

在本篇中，我们将解释 ​​XSS​​​ 和 ​​CSRF​​​ 之间的区别，并讨论 ​​CSRFtoken​​​ 是否有助于防御 ​​XSS​​公鸡。XSS和CSRF之间有啥区别跨站脚本公鸡​​XSS​​ 允许公鸡者在受害... 查看详情

#yyds干货盘点#js截取文件后缀名

方法一:<inputtype="file"onChange="change(event)"><script>functionchange(event)varfileName=event.target.files[0].name.toLowerCase();varlastIndex=fileName.lastIndexOf(.);varsuffix=fileName.subs 查看详情

#yyds干货盘点#saltshake安装配置

后台：​​https://github.com/saltshaker-plus/saltshaker_api​​前端：​​https://github.com/saltshaker-plus/saltshaker_frontend​​要求：Python>=3.6Mysql>=5.7.8（支持Json的Mysql都可以）Redis（无版本要求）RabbitMQ（无版本要求）Python软 查看详情

#yyds干货盘点#nodejs后端token权限问题

话不多说，直接上代码登录接口exportdefaultclassAuthControllerstaticasynclogin(req,res)tryconstname,password=req.body;if(!name||typeofname!=="string")res.status(400).json(resultFail("Badnameformat,expectedstring.")); 查看详情

#yyds干货盘点#自适应布局方案

起步rem是什么​​rem​​（fontsizeoftherootelement）是指相对于根元素​​<html>​​来做计算的字体大小单位。e.g.设置​​htmlfont-size:75px​​时，其他元素​​1rem=75px​​，​​4rem=300px​​vw是什么​​vw​​是基于​​viewport... 查看详情

#yyds干货盘点#常用less函数

文本行数限制.add-text-row-limit(@row)overflow:hidden;text-overflow:ellipsis;.create();.create()when(@row>1)display:-webkit-box;-webkit-line-clamp:@row;-webkit-box-orient:vertical;.create()when(@row=1)whi 查看详情

#yyds干货盘点#parseint怪异行为

​​parseInt()​​是内置的JS函数，用于解析数字字符串中的整数。例如，解析数字字符串​​100​​：constnumber=parseInt(100);number;//100如预期的那样，​​100​​​被解析为整数 ​​100​​。​​parseInt(numericalString,radix)​​还... 查看详情

#yyds干货盘点#前端内存泄露问题

内存泄露指内存被占用且没有及时释放内存泄露越多，计算机剩余的内存就越小，此时越容易发生内存溢出常见的内存泄露情况：意外的全局变量未及时清理计时器或回调函数闭包functionx()a=10;//或者this.a=10;//或者window.a=10;x();//产... 查看详情

#yyds干货盘点#名企真题专题：回文串

1.简述：描述给定一个字符串，问是否能通过添加一个字母将其变为回文串。输入描述：一行一个由小写字母构成的字符串，字符串长度小于等于10。输出描述：输出答案(YES\\NO).示例1输入：coco输出：YES2.代码实现：importjava.util.*;... 查看详情

#yyds干货盘点#可以中断的异步操作

由于JavaScript的单线程特性，能在JavaScript中进行的异步场景其实不多，大概有如下一些：​​setTimeout()​​ /​​setInterval()​​事件Ajax部分对Native方法的调用……中断Ajax操作Ajax处理基本上也可以归为“对Native方法调用”一... 查看详情

#yyds干货盘点#react前端优化小结笔记

编译阶段的优化主要是webpack开发环境时重复构建更快1.include缩小编译的范围rules:[test:/\\.js$/,use:[loader:babel-loader,options:cacheDirectory:true,persets:[@babel/preset-react],plugins:[@babel/plugin-proposal-class-properties]],i 查看详情

#yyds干货盘点#nginx配置ssl证书

申请​​ssl​​ 证书把证书copy到​​nginx​​ 目录下,比如我放在了一个叫​​ca​​ 的目录，一个​​.cer​​ 文件，一个​​.key​​ 文件，一共两个文件配置​​.conf​​文件serverserver_nameghostwang.xxx.com;#... 查看详情

#yyds干货盘点#慎用json.stringfy

项目中遇到一个bug，一个组件为了保留一份JSON对象，使用JSON.stringify将其转换成字符串，这样做当然是为了避免对象是引用类型造成数据源的污染。但发现后面使用JSON.parse方法之后，发现数据有所变化。代码简化：letobj=name:Gopal... 查看详情

#yyds干货盘点#nginx配置反向代理

闲话不多说，直接上干货。（1）找到nginx配置文件nginx.conf小编是通过docker拉取的nginx，默认配置文件是nginx.conf中引入包含的default.conf文件也就是说nginx.conf配置文件中有如下一个配置include/etc/nginx/conf.d/*.conf;（2）修改配置->实... 查看详情