什么是IndexedDB?有什么特点

IndexedDB 是一种在用户浏览器中存储大量结构化数据的低级API。它是一种事务性数据库系统,允许Web应用程序保存和检索复杂的数据类型,如文件或二进制大对象(BLOB)。与 localStoragesessionStorage 不同,IndexedDB 提供了更强大的功能,适合需要频繁读写操作、处理复杂查询以及管理大量数据的应用场景。

特点

  • 大规模数据存储:IndexedDB 支持存储大量的结构化数据,包括JSON对象、数组等,并且可以存储文件和二进制数据。
  • 异步API:所有操作都是异步的,不会阻塞主线程,这有助于保持网页的响应性和流畅度。
  • 索引支持:可以为对象存储中的记录创建索引,以提高查询效率。
  • 事务机制:对数据库的操作是通过事务来进行的,确保了数据的一致性和完整性。
  • 键值对存储:数据以键值对的形式存储,每个存储对象都有一个主键,可以通过这个主键快速查找记录。
  • 跨窗口同步:多个浏览器标签页或窗口之间共享同一个IndexedDB实例,并且能够同步更新。

使用场景

  • 离线存储:当用户处于离线状态时,IndexedDB 可以作为缓存来存储应用所需的数据,以便在没有网络连接的情况下仍能正常使用应用。
  • 数据持久化:用于保存用户的设置、偏好或其他重要信息,这些数据可以在不同会话间持久存在。
  • 复杂查询:由于支持索引和事务,IndexedDB 适合执行复杂的查询操作,如范围查询、排序等。
  • 媒体文件存储:可以用来缓存音频、视频等多媒体资源,减少从服务器加载的时间。

基本概念

  • Database (数据库):包含一组相关的对象存储空间。
  • Object Store (对象存储):类似于关系型数据库中的表,用于存储具有相同模式的数据记录。
  • Key (键):每个记录都有一个唯一的标识符,称为键,可以是自动生成的或由开发者指定。
  • Index (索引):为了加速特定属性上的查询而创建的辅助数据结构。
  • Transaction (事务):用于确保一系列数据库操作要么全部成功,要么全部失败,保证数据一致性。

API 方法

IndexedDB 的API相对较为复杂,主要包括以下几个方面:

  • 打开数据库:使用 indexedDB.open() 方法来打开现有数据库或创建新数据库。
  • 定义对象存储:在 onupgradeneeded 事件中定义新的对象存储或修改现有的对象存储。
  • 添加/更新记录:使用 add() 或 put() 方法向对象存储中插入新记录或更新已有记录。
  • 检索记录:使用 get() 方法根据键获取单个记录,或者使用游标遍历多个记录。
  • 删除记录:使用 delete() 方法移除特定键对应的记录。
  • 创建索引:使用 createIndex() 方法为对象存储中的某个属性创建索引,以加快查询速度。
  • 事务管理:通过 transaction() 方法开始一个新的事务,指定要访问的对象存储及其访问模式(只读或读写)。
示例代码
// 打开或创建一个名为 "myDatabase" 的数据库,版本号为 1
let request = indexedDB.open("myDatabase", 1);request.onupgradeneeded = function(event) {let db = event.target.result;// 如果对象存储不存在,则创建一个名为 "users" 的对象存储if (!db.objectStoreNames.contains("users")) {db.createObjectStore("users", { keyPath: "id", autoIncrement: true });}
};request.onsuccess = function(event) {let db = event.target.result;// 开始一个事务,访问 "users" 对象存储,权限为读写let transaction = db.transaction(["users"], "readwrite");let objectStore = transaction.objectStore("users");// 添加一条新记录objectStore.add({ name: "John Doe", age: 30 });// 查询所有记录并打印到控制台objectStore.openCursor().onsuccess = function(event) {let cursor = event.target.result;if (cursor) {console.log(cursor.value);cursor.continue();} else {console.log("No more entries!");}};// 关闭数据库连接db.close();
};request.onerror = function(event) {console.error("Error opening database.");
};

安全性注意事项

虽然 IndexedDB 是一个强大的客户端存储解决方案,但它并不适合存储敏感信息,除非采取了适当的加密措施。这是因为 IndexedDB 数据可以直接被JavaScript脚本访问,容易受到跨站脚本攻击(XSS)的影响。因此,在设计应用程序时应考虑如何安全地处理和保护用户数据。

总结

IndexedDB 为 Web 应用程序提供了一种灵活且高效的客户端数据存储方式,特别适用于那些需要处理大量结构化数据的应用。尽管其API比 localStoragesessionStorage 更加复杂,但对于构建高性能、离线可用的Web应用来说,它是不可或缺的选择。

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

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

相关文章

软件测试基础详解(自动化测试/安全测试/性能测试)

🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 自动化测试的意义 缩短软件开发测试周期,可以让产品更快投放市场 测试效率高,充分利用硬件资源 节省人力资源,降低测试成本 …

最小二乘法实际应用

最小二乘法 使用最小二乘法拟合大气二氧化碳浓度数据 数据保存在monthly_co2.xls文件中(只截取部分) python需要安装的库 xlrdnumpypandasmatplotlib 绘制图像代码(绘制整体数据趋势图) # -*- coding: utf-8 -*- """ File : 绘制趋势图.py Time : …

HTML5系列(13)-- 微数据与结构化数据指南

前端技术探索系列:HTML5 微数据与结构化数据指南 📊 致读者:探索数据语义化的世界 👋 前端开发者们, 今天我们将深入探讨 HTML5 微数据与结构化数据,学习如何让网页内容更易被搜索引擎理解和解析。 微数…

原生html+css+ajax实现二级下拉选择的增删改及树形结构列出

<?php $db_host localhost; $db_user info_chalide; $db_pass j8c2rRr2RnA; $db_name info_chalide; /* 数据库结构SQL CREATE TABLE categories ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, parent_id INT DEFAULT 0 ); */ try { $pdo new PD…

Linux操作系统--文件的重定向以及文件缓冲区

目录 前言 一、文件描述符的分配规则 二、重定向 三、系统中的重定向接口 1、dup2()介绍 2、dup2()使用 1&#xff09;输出重定向和追加重定向 2&#xff09;输入重定向 四、文件缓冲区 1、定义 2、缓冲区刷新的条件 1&#xff09;文件缓冲区存在的意义 2&…

5G CPE核心器件-基带处理器(三)

5G CPE 核心器件 -5G基带芯片 基带芯片简介基带芯片组成与结构技术特点与发展趋势5G基带芯片是5G CPE中最核心的组件,负责接入5G网络,并进行上下行数据业务传输。移动通信从1G发展到5G,终端形态产生了极大的变化,在集成度、功耗、性能等方面都取得巨大的提升。 基带芯片简…

深入了解 Python 的 xarray 库:多维数据的高效处理工具

深入了解 Python 的 xarray 库&#xff1a;多维数据的高效处理工具 什么是 xarray&#xff1f; 在科学计算和数据分析领域&#xff0c;处理多维数据&#xff08;如时间序列、空间网格等&#xff09;是常见需求。虽然 NumPy 提供了高效的多维数组操作&#xff0c;但它缺乏对数…

mmdection配置-yolo转coco

基础配置看我的mmsegmentation。 也可以参考b站 &#xff1a;https://www.bilibili.com/video/BV1xA4m1c7H8/?vd_source701421543dabde010814d3f9ea6917f6#reply248829735200 这里面最大的坑就是配置coco数据集。我一般是用yolo&#xff0c;这个yolo转coco格式很难搞定&#…

THREE.js 入门(一)xyz坐标系

一、坐标系概念 在 three.js 中&#xff0c;相机的默认朝向是沿着 Z 轴的负方向。也就是说&#xff0c;默认情况下&#xff0c;相机会沿着 Z 轴的负方向“看”到场景中的对象&#xff0c;而 X 轴和 Y 轴分别对应水平方向和垂直方向。换句话说&#xff0c;相机的默认位置是 (0,…

【Java从入门到放弃 之 Stream API】

Java Stream API Stream API行为参数化传递代码Lambda表达式Lambda 表达式的语法方法引用 Lambda 表达式的实际应用集合操作并发编程 Lambda 表达式的注意事项总结 Stream API Java8提供了一个全新的API - Stream。引入这个Stream的主要目的&#xff0c;一个是可以支持更好的并…

Java 单元测试模拟框架-Mockito 的介绍

Mockito 是什么 Mockito 是一个用于单元测试的模拟框架&#xff0c;基于它可以使用简洁易用的API编写出色的测试。 Mockito 允许开发人员创建和管理模拟对象&#xff08;mock objects&#xff09;&#xff0c;以便在测试过程中替换那些不容易构造或获取的对象。 Mockito的基本…

websocket通信

“WebSocket 允许客户端和服务器在连接建立后随时互相发送数据&#xff0c;而无需每次交互都重新建立连接。”我想请问&#xff0c;第一次前端往后端发送数据时&#xff0c;传递的数据应该满足接口的参数内容&#xff0c;在第一次建立连接后之后的数据传递还是要满足接口的参数…

C++Qt开机自启动

文章目录 方法一&#xff1a;注册表方法二&#xff1a;快捷方式到自启动目录 方法一&#xff1a;注册表 #include <QtCore/QCoreApplication> #include <QtCore/QSettings> #include <QtCore/QDebug> #include <QtCore/QProcess>int main(int argc, c…

NiFi-从部署到开发(图文详解)

NiFi简介 Apache NiFi 是一款强大的开源数据集成工具&#xff0c;旨在简化数据流的管理、传输和自动化。它提供了直观的用户界面和可视化工具&#xff0c;使用户能够轻松设计、控制和监控复杂的数据流程&#xff0c;NiFi 具备强大的扩展性和可靠性&#xff0c;可用于处理海量数…

draggable插件——实现元素的拖动排序——拖动和不可拖动的两种情况处理

最近在写后台管理系统的时候&#xff0c;遇到一个需求&#xff0c;就是关于拖动排序的功能。 我之前是写过一个关于拖动表格的功能&#xff0c;此功能可以实现表格中的每一行数据上下拖动实现排序的效果。 vue——实现表格的拖拽排序功能——技能提升 但是目前我这边的需求是…

Delphi Web前端开发教程(9):基于TMS WEB Core框架

3、REST Servers服务端(后端)框架 REST服务端特点&#xff1a; – 为远程资源提供一个REST API接口。也可以为其他网络内容提供服务&#xff1b; – 包括在Delphi Enterprise & Architect企业版和架构师版中的RAD服务器、DataSnap、WebBroker&#xff1b; – 开源框架&a…

MySQL 函数创建中的 Err 1418:原因解析与解决指南20241203

&#x1f6a8; MySQL 函数创建中的 Err 1418&#xff1a;原因解析与解决指南 &#x1f4d6; 引言 在使用 MySQL 创建函数时&#xff0c;许多开发者会偶然遇到如下报错&#xff1a; [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its…

前端首屏加载优化

1.首屏加载慢的原因 网络延迟资源太大服务器响应慢 1.网络延迟 首屏优化中网络延迟是一个重要的考虑因素&#xff0c;它直接影响到页面资源的加载速度和用户体验。 影响原因 后端服务器性能原因&#xff0c;导致响应速度慢&#xff0c;从而影响了首屏加载速度。网络传输速度…

利用空闲主机进行Nmap隐匿扫描:IP伪造与空闲扫描技术

IP伪造与空闲扫描技术 在网络安全领域&#xff0c;扫描和识别目标主机的开放端口是攻击者获取目标信息的重要手段。传统的扫描方法可能会暴露扫描者的真实IP地址&#xff0c;从而引起目标主机的警觉。然而&#xff0c;IP地址伪造是一种巧妙的方式&#xff0c;可以帮助攻击者在…

学习视频超分辨率扩散模型中的空间适应和时间相干性(原文翻译)

文章目录 摘要1. Introduction2. Related Work3. Our Approach3.1. Video Upscaler3.2. Spatial Feature Adaptation Module3.3. Temporal Feature Alignment Module3.4. Video Refiner3.5. Training Strategy 4. Experiments4.1. Experimental Settings4.2. Comparisons with …