浏览器百科：网页存储篇-IndexedDB介绍（十）

1.引言

在现代网页开发中，数据存储需求日益增多和复杂，传统的客户端存储技术如localStorage和sessionStorage已难以满足大型数据的存储和管理需求。为了解决这一问题，HTML5 引入了 IndexedDB，在本篇《浏览器百科：网页存储篇-IndexedDB介绍（十）》中，我们将详细介绍 IndexedDB 的基本概念、使用方法及其在实际开发中的应用场景，帮助您全面掌握这一强大的数据存储技术，为您的网页应用提供更可靠和高效的数据管理解决方案。

2.什么是IndexedDB

IndexedDB 是一种基于键值对存储的大型数据库，允许开发者在用户的浏览器中存储和检索大量数据。与其他存储方式（如 LocalStorage 和 SessionStorage）不同，IndexedDB 设计用于存储结构化数据，并支持事务、索引、查询等高级功能，类似于传统的关系型数据库。

3.IndexedDB的特点

  • 大量数据存储：IndexedDB 可以存储大量数据，远超过 LocalStorage 的 5MB 限制，并允许在没有网络连接时进行读写操作，因此IndexedDB 是离线应用程序的理想选择。
  • 异步 API：IndexedDB 使用异步 API，有助于避免阻塞主线程，提高应用程序的性能和响应速度。
  • 事务支持：IndexedDB 支持事务处理，保证了数据操作的原子性和一致性，避免数据不一致的情况。
  • 复杂查询能力：IndexedDB 支持使用索引和游标进行复杂查询，能够高效地检索和操作数据。
  • 结构化存储：IndexedDB 允许存储结构化数据，包括对象和文件，使数据管理更加灵活和方便。

4. IndexedDB中的基本概念

4.1 数据库和对象存储

IndexedDB 中的数据存储在数据库中，每个数据库可以包含多个对象存储。对象存储类似于关系数据库中的表，用于存储特定类型的数据记录。每个对象存储中的数据记录都具有唯一的键（key），通过键可以快速查找对应的数据。

在IndexedDB中，可以通过以下步骤来创建或打开一个数据库：

const openDB = () => {return new Promise<void>((resolve, reject) => {// 打开名为 'MyDatabase' 且版本号为 1 的数据库const request = indexedDB.open('MyDatabase', 1)// 当数据库版本升级或首次创建数据库时触发request.onupgradeneeded = (event: IDBVersionChangeEvent) => {db = (event.target as IDBOpenDBRequest).result}// 当数据库成功打开时触发request.onsuccess = (event: Event) => {db = (event.target as IDBOpenDBRequest).resultresolve()}// 当数据库打开失败时触发request.onerror = (event: Event) => {console.error('Database error:', (event.target as IDBOpenDBRequest).error)reject((event.target as IDBOpenDBRequest).error)}}
}

4.2 键值对存储模型

键（key）是 IndexedDB 中用于标识数据记录的唯一标识符。键可以是一个数值、字符串、日期或者二进制数据。对应值（Value）是一个字符串，指向对象中的某个属性，用于自动生成键。

  • 在IndexedDB中，可以通过以下步骤来向对象存储空间添加数据：
const addItem = async () => {if (id.value !== null && name.value) {// 创建一个读写事务const transaction = db.transaction('MyObjectStore', 'readwrite')// 获取对象存储const objectStore = transaction.objectStore('MyObjectStore')// 定义要添加的对象const item = { id: id.value, name: name.value }// 将对象添加到对象存储中const request = objectStore.add(item)request.onsuccess = () => {alert('Item added successfully')// 添加成功后获取所有对象并更新显示getAllItems()}request.onerror = (event: Event) => {console.error('Add item error:', (event.target as IDBRequest).error)}}
}
  • 要删除对象存储空间，可以使用delete()方法：
const deleteItem = (id: number) => {const transaction = db.transaction('MyObjectStore', 'readwrite')const objectStore = transaction.objectStore('MyObjectStore')const request = objectStore.delete(id)request.onsuccess = () => {alert('Item deleted successfully')getAllItems()}request.onerror = (event: Event) => {console.error('Delete item error:', (event.target as IDBRequest).error)}
}
  • 要更新对象，可以使用put方法：
const updateItem = (id: number, newName: string) => {const transaction = db.transaction('MyObjectStore', 'readwrite')const objectStore = transaction.objectStore('MyObjectStore')const request = objectStore.get(id)request.onsuccess = (event: Event) => {const item = (event.target as IDBRequest).resultif (item) {item.name = newNameconst updateRequest = objectStore.put(item)updateRequest.onsuccess = () => {alert('Item updated successfully')getAllItems()}updateRequest.onerror = (event: Event) => {console.error('Update item error:', (event.target as IDBRequest).error)}} else {alert('Item not found')}}request.onerror = (event: Event) => {console.error('Get item for update error:', (event.target as IDBRequest).error)}
}

4.3 事务和作用域

事务是 IndexedDB 中的数据操作单位，用于确保数据操作的原子性和一致性。事务具有作用域，指定了哪些对象存储可以在事务中访问。事务可以是只读的或读写的。在事务完成之前，所有的数据操作都在一个隔离的环境中进行，确保数据的一致性。

4.4 索引和游标

索引是 IndexedDB 提供的快速查找机制，用于加速数据查询。索引基于对象存储中的一个或多个属性构建，可以显著提高查询效率。游标则是一种遍历数据记录的机制，允许开发者逐条访问数据记录，适用于需要处理大量数据的场景。

在 IndexedDB 中查询对象可以使用多种方法，具体取决于查询的需求和复杂性。

  • get方法用于根据键查询单个对象：
const getItem = (id: number) => {const transaction = db.transaction('MyObjectStore', 'readonly')const objectStore = transaction.objectStore('MyObjectStore')const request = objectStore.get(id)request.onsuccess = (event: Event) => {const item = (event.target as IDBRequest).resultif (item) {console.log('Item found:', item)// 这里可以添加处理找到的对象的逻辑，例如更新状态或显示在UI中} else {console.log('Item not found')}}request.onerror = (event: Event) => {console.error('Get item error:', (event.target as IDBRequest).error)}
}
  • getAll方法用于获取对象存储中的所有对象：
const getAllItems = () => {const transaction = db.transaction('MyObjectStore', 'readonly')const objectStore = transaction.objectStore('MyObjectStore')const request = objectStore.getAll()request.onsuccess = (event: Event) => {items.value = (event.target as IDBRequest).result}request.onerror = (event: Event) => {console.error('Get all items error:', (event.target as IDBRequest).error)}
}

5. 总结

通过对 IndexedDB 的详细介绍，我们了解了其作为现代网页存储解决方案的强大特性和应用方法。IndexedDB 提供了大规模数据存储、异步API、事务支持、复杂查询能力和结构化存储等多种优势，能够满足现代Web应用程序复杂的数据管理需求。在本篇文章中，我们涵盖了 IndexedDB 的基本概念、特点以及实际应用中的一些代码示例，包括如何创建和打开数据库、添加、删除、更新和查询数据等操作。希望这些内容能帮助您更好地理解和应用 IndexedDB。

为了更好地管理和调试 IndexedDB，Chrome 浏览器提供了一个强大的开发者工具，其中包含了IndexedDB窗格。在下一篇《浏览器百科：网页存储篇-如何在Chrome中打开IndexedDB窗格（十一）》中，我们将详细介绍如何在 Chrome 中打开并使用 IndexedDB 窗格，以便开发者能更直观地查看和操作存储的数据，进一步提升开发效率和应用性能。敬请期待！

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

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

相关文章

Debug-027-el-tooltip组件的使用及注意事项

Debug-027-el-tooltip组件的使用及注意事项

前言&#xff1a; 这两天&#xff0c;碰到这个饿了么的el-tooltip比较多。这个组件使用起来也挺简单的&#xff0c;常用于展示鼠标 hover 时的提示信息。但是有一些小点需要注意。这里不再机械化的介绍文档&#xff0c;不熟悉的话可以先看一下&#xff1a; https://element-pl…
阅读更多...
Linux 硬件学习 s3c2440 arm920t蜂鸣器

Linux 硬件学习 s3c2440 arm920t蜂鸣器

1.查找手册时钟图&#xff0c;输入12m想要通过pll得到400m的信号 2.对比pll值&#xff0c;找到最近的为405&#xff0c;得到pll中mdiv为127&#xff0c;pdiv为2&#xff0c;sdiv为1 3.想要得到fclk400&#xff0c;hclk100&#xff0c;pclk50&#xff0c;对比分频比例&#xff0…
阅读更多...
jmeter执行python脚本，python脚本的Faker库

jmeter执行python脚本，python脚本的Faker库

jmeter安装 jython的插件jar包 通过如下地址下载jython-standalone-XXX.jar包并放到jmeter的XXX\lib\ext目录下面 Downloads | JythonThe Python runtime on the JVMhttps://www.jython.org/download.html 重启jmeter在JSR223中找到jython可以编写python代码执行 python造数据…
阅读更多...
MySQL：运维管理-主从复制

MySQL：运维管理-主从复制

目录 一、主从复制的概述二、主从复制的工作原理三、搭建主从复制的结构3.1 环境准备3.2 搭建配置&#xff08;主库配置&#xff09;3.3 搭建配置&#xff08;从库配置&#xff09;3.4 测试 一、主从复制的概述 主从复制是指将主数据库中的DDL和DML操作的二进制文件保存到本地&…
阅读更多...
小间距LED显示屏的模组与箱体参数

小间距LED显示屏的模组与箱体参数

随着显示技术的发展&#xff0c;小间距LED显示屏因其高清晰度和高亮度而越来越受到市场的欢迎。然而&#xff0c;对于许多用户来说&#xff0c;如何理解和选择小间距LED显示屏的参数可能是一个挑战。本文将详细介绍小间距LED显示屏的两大核心参数&#xff1a;模组参数和箱体参数…
阅读更多...
Python画笔案例-045 绘制渐变圆盘

Python画笔案例-045 绘制渐变圆盘

1、绘制 渐变圆盘 通过 python 的turtle 库绘制 渐变圆盘&#xff0c;如下图&#xff1a; 2、实现代码 绘制 渐变圆盘&#xff0c;以下为实现代码&#xff1a; """本程序需要coloradd模块支持,安装方法pip install coloradd """ import turtle …
阅读更多...
2024年解锁高效项目管理的秘密：AI赋能的10款项目管理工具大比拼

2024年解锁高效项目管理的秘密：AI赋能的10款项目管理工具大比拼

在数字化转型的浪潮中&#xff0c;项目经理、产品经理、研发管理者以及企业管理者们正面临着前所未有的挑战。如何在快节奏的环境中保持高效&#xff0c;确保项目按时交付&#xff0c;同时保证质量&#xff0c;成为了每个团队都需要思考的问题。幸运的是&#xff0c;随着AI技术…
阅读更多...
如何用python打开csv文件路径

如何用python打开csv文件路径

python读取CSV文件方法&#xff1a; 方法1&#xff1a;可先用以下代码查看当前工作路径&#xff0c;然后将CSV文件放在该路径下。 import os os.getcwd() 方法2&#xff1a;&#xff08;绝对路径&#xff09; import pandas as pd iris_trainpd.read_csv(E:\Study\DataSets\ir…
阅读更多...
武汉传媒学院联合创龙教仪建设DSP教学实验箱，基于DSP C6000平台搭建

武汉传媒学院联合创龙教仪建设DSP教学实验箱，基于DSP C6000平台搭建

1、院校简介 武汉传媒学院是中南地区唯一一所传媒类本科高校&#xff0c;也是湖北省“转型发展”首批试点高校 前身是2004年成立的华中师范大学武汉影视工程学院&#xff0c;2007年经教育部批准更名为华中师范大学武汉传媒学院&#xff0c;2016年&#xff0c;经教育部批准&…
阅读更多...
BizDevOps落地实践

BizDevOps落地实践

我理解BizDevOps就是端到端&#xff0c;从战略业务机会到开发上线 参考资料 十六年所思所感&#xff0c;聊聊这些年我所经历的 DevOps 系统 必致&#xff08;BizDevOps&#xff09;白皮书2022免费下载_在线阅读_藏经阁-阿里云开发者社区 具体落地实践 战略规划 战略&…
阅读更多...
【网络安全】服务基础第二阶段——第五节：Linux系统管理基础----Linux常见应用服务（Apache、数据库）

【网络安全】服务基础第二阶段——第五节：Linux系统管理基础----Linux常见应用服务（Apache、数据库）

在Linux系统中&#xff0c;有许多常见的应用服务&#xff0c;它们用于执行各种任务&#xff0c;如网页托管、数据库管理、文件传输等。 Apache HTTP Server&#xff1a;用于托管网站和Web应用程序的Web服务器。Nginx&#xff1a;高性能的Web服务器和反向代理服务器&#xff0c…
阅读更多...
使用CUBE_MX实现STM32 DMA 功能（存储器到存储器）

使用CUBE_MX实现STM32 DMA 功能（存储器到存储器）

目录 一、使用DMA实现从存储器1发送数据到存储器2中 1.CUBE_MX配置 2.KEIL5配置 一、使用DMA实现从存储器1发送数据到存储器2中 1.CUBE_MX配置 1.在DMA选项中添加MEMORY TO MEMORY 选择数据宽度&#xff0c;并确保地址递增功能打开。 2.系统时钟72MHz 3.生成代码 2.KEIL5配…
阅读更多...
echarts饼图内容循环播放实现

echarts饼图内容循环播放实现

echarts饼图内容循环播放实现 效果展示思路难点代码实现 效果展示 思路 先实现普通的饼图&#xff0c;再处理数据内容&#xff1a;使用for循环延时器实现数据分割&#xff0c;数据处理好后再进行渲染。 难点 数据分割 代码实现 <template><div :class"classN…
阅读更多...
vue3 使用swiper制作带缩略图的轮播图

vue3 使用swiper制作带缩略图的轮播图

效果图 实现代码 <template><div class"wrap"><!-- 主轮播图 --><swiper :style"{--swiper-navigation-color: #fff,--swiper-pagination-color: #fff,}" :modules"modules" :navigation"true" :thumbs"{ …
阅读更多...
基于微信小程序的高校实验室管理系统的设计与实现

基于微信小程序的高校实验室管理系统的设计与实现

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的高…
阅读更多...
“他人笑我太疯癫，我笑他人看不穿“，关于因回复慢后，被骂事件，做知识分享，不是你理所应当的索要

“他人笑我太疯癫，我笑他人看不穿“，关于因回复慢后，被骂事件，做知识分享，不是你理所应当的索要

原文链接&#xff1a;“他人笑我太疯癫&#xff0c;我笑他人看不穿" 引言 他人笑我太疯癫&#xff0c;我笑他人看不穿 大家好&#xff0c;这里是小杜本杜&#xff0c;今天又是一篇情绪篇&#xff0c;虽然这样的事情在我这里并不是时常发生。 然而&#xff0c;这样的事…
阅读更多...
COCOS：（飞机大战09）敌机注册碰撞事件，控制敌机的销毁

COCOS：（飞机大战09）敌机注册碰撞事件，控制敌机的销毁

先区分要监听谁&#xff0c;子弹打到飞机上&#xff0c;飞机去播放动画&#xff0c;并完成销毁操作&#xff0c;注册碰撞事件就写在飞机上。 飞机预制体都绑定了Enemy.ts,注册事件就写到这个文件内 import { _decorator, Animation, Collider2D, Component, Contact2DType, …
阅读更多...
postman互转 json报文变为表单报文bulk

postman互转 json报文变为表单报文bulk

{"age":0"username":"chengyaojin""password":"944621""createDate":"2021-01-06" }age:0 username:chengyaojin password:944621 createDate:2021-01-06json转postman的bulk工具推荐在线json与postman…
阅读更多...
Benvista PhotoZoom Pro / Classic 9.0.2 Win/mac + Plug-in中文破解版

Benvista PhotoZoom Pro / Classic 9.0.2 Win/mac + Plug-in中文破解版

对数码照片放大的质量不满意&#xff1f; 使用 BenVista PhotoZoom Classic9 调整图像大小&#xff0c;并通过我们屡获殊荣的独特 S-Spline 技术获得出色的效果&#xff01; 更高质量&#xff1a;PhotoZoom Classic9 专门用于在保持质量的同时放大照片。 该软件配备了 BenVista…
阅读更多...
C++ 在项目中使用Linux命令

C++ 在项目中使用Linux命令

一: 选择shell Linux 命令是由shell解析并转发给操作系统执行的&#xff0c;所有的shell都是从 Bourne shell&#xff08;/bin/sh&#xff09;派生的&#xff0c;Bourne shell是贝尔实验室为早期版本的Unix开发的标准shell。 每个Unix系统都需要一个版本的Bourne shell才能正…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发