浏览器百科:网页存储篇-IndexedDB介绍(十)

news2024/11/23 4:26:49

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).result
      resolve()
    }

 // 当数据库打开失败时触发
    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).result
    if (item) {
      item.name = newName
      const 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).result
    if (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.coloradmin.cn/o/2130261.html

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

相关文章

SiC,GaN驱动优选驱动方案SiLM5350系列SiLM5350MDDCM-DG 带米勒钳位Clamp保护功能 单通道隔离栅极驱动器

SiLM5350MDDCM-DG是一款适用于IGBT、MOSFET的单通道 隔离门极驱动器&#xff0c;具有10A拉电流和10A灌电流驱动能 力。提供内部钳位功能&#xff0c;可单独控制 上升时间和下降时间。 在 SOP8 封 装 中 具 有 3000VRMS 隔 离 耐 压 &#xff08; 符 合 UL1577&#xff09;。 与…

Vue-Route4 ts

小满学习视频 Vue-Route 官网 项目的目录结构&#xff1a; 1. Vue-Router的使用 安装Vue-route pnpm add vue-router4创建router文件 /route/index.vue import { createRouter } from "vue-router"; import {createMemoryHistory,createWebHashHistory,create…

C语言 | Leetcode C语言题解之第395题至少有K个重复字符的最长子串

题目&#xff1a; 题解&#xff1a; int longestSubstring(char* s, int k) {int ret 0;int n strlen(s);for (int t 1; t < 26; t) {int l 0, r 0;int cnt[26];memset(cnt, 0, sizeof(cnt));int tot 0;int less 0;while (r < n) {cnt[s[r] - a];if (cnt[s[r] - …

Framework | 在Android中运行时获取顶层Activity并处理业务逻辑

Framework | 在Android中运行时获取顶层Activity并处理业务逻辑 在Android应用的开发中,有时需要获取当前正在运行的顶层Activity,尤其是当应用需要监控特定的页面或执行特殊的业务处理时,例如在截图界面进行操作或在特定的活动页面展示特定的功能。本文将详细介绍如何通过…

中电金信:金融级数字底座“源启”:打造新型数字基础设施 筑牢千行百业数字化转型发展基石

近期&#xff0c;金融级数字底座“源启”登录中国电子《最轻大国重器》融媒体报道。从数字底座到数智底座&#xff0c;从金融行业到千行百业&#xff0c;“源启”用数智化转型的中国电子解决方案&#xff0c;为全球企业转型及安全发展提供强大动能。 立足中国电子科技创新成果&…

英飞凌motor电机方案

电机主流方案的应用场景,一个是家电,一个是汽车,尤其是新能源汽车。 多家MCU厂商也都推出自己电机解决方案,比如华大电子: HC32M140 系列产品为华大半导体研制的 32bit 基于 ARM-Cortex M0+ 的 MCU,与传统的 CPU 内核相比,效率更高,功耗更低。更宽的工作电压范围,可同…

C语言的结构体类型

在我们使用C语言进行编写代码时&#xff0c;常常会使用已经给定的类型来创建变量&#xff0c;比如int型&#xff0c;char型&#xff0c;double型等&#xff0c;而当我们想创建一些较为复杂的东西时&#xff0c;单单用一个类型变量是没办法做到的&#xff0c;比如我们想创建一个…

图文讲解HarmonyOS应用发布流程

HarmonyOS应用的开发和发布过程可以分为以下几个步骤&#xff1a;证书生成、应用开发、应用签名和发布。 1. 证书生成&#xff1a; 在开始开发HarmonyOS应用之前&#xff0c;首先需要生成一个开发者证书。开发者证书用于标识应用的开发者身份并确保应用的安全性。可以通过Har…

R语言统计分析——功效分析3(相关、线性模型)

参考资料&#xff1a;R语言实战【第2版】 1、相关性 pwr.r.test()函数可以对相关性分析进行功效分析。格式如下&#xff1a; pwr.r.test(n, r, sig.level, power, alternative) 其中&#xff0c;n是观测数目&#xff0c;r是效应值&#xff08;通过线性相关系数衡量&#xff0…

LoRA: Low-Rank Adaptation Abstract

LoRA: Low-Rank Adaptation Abstract LoRA 论文的摘要介绍了一种用于减少大规模预训练模型微调过程中可训练参数数量和内存需求的方法&#xff0c;例如拥有1750亿参数的GPT-3。LoRA 通过冻结模型权重并引入可训练的低秩分解矩阵&#xff0c;减少了10,000倍的可训练参数&#xf…

HashMap常用方法及底层原理

目录 一、什么是HashMap二、HashMap的链表与红黑树1、数据结构2、链表转为红黑树3、红黑树退化为链表 三、存储&#xff08;put&#xff09;操作四、读取&#xff08;get&#xff09;操作五、扩容&#xff08;resize&#xff09;操作六、HashMap的线程安全与顺序1、线程安全2、…

云计算实训49——k8s环镜搭建(续2)

一、Metrics 部署 在新版的 Kubernetes 中系统资源的采集均使⽤ Metrics-server&#xff0c;可 以通过 Metrics 采集节点和 Pod 的内存、磁盘、CPU和⽹络的使⽤ 率。 &#xff08;1&#xff09;复制证书到所有 node 节点 将 master 节点的 front-proxy-ca.crt 复制到所有 No…

Linux进阶命令-top

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 经过上一章Linux日志的讲解&#xff0c;我们对Linux系统自带的日志服务已经有了一些了解。我们接下来将讲解一些进阶命令&am…

【计算机网络】初识网络

初识网络 初识网络网络的发展局域网广域网 网络基础IP地址端口号协议五元组协议分层OSI 七层模型TCP/IP五层模型封装和分用"客户段-服务器"结构 初识网络 网络的发展 在过去网络还没有出现的时候, 我们的计算机大部分都是独自运行的, 比如以前那些老游戏, 都是只能…

Chainlit集成Langchain并使用通义千问实现文生图网页应用

前言 本文教程如何使用通义千问的大模型服务平台的接口&#xff0c;实现图片生成的网页应用&#xff0c;主要用到的技术服务有&#xff0c;chainlit 、 langchain、 flux。合利用了大模型的工具选择调用能力。实现聊天对话生成图片的网页应用。 阿里云 大模型服务平台百炼 API…

1.SpringCloud与SpringCloud Alibaba

SpringCloud与SpringCloud Alibaba主要讲解的内容&#xff1a; 备注&#xff1a;黑色部分是springcloud社区原版&#xff0c;红色的是SpringCloud Alibaba 服务注册与发现 Consul Alibaba Nacos 服务调用和负载均衡 LoadBalancer OpenFeign 分布式事务 Alibaba Seata 服务熔…

批量插入insert到SQLServer数据库,BigDecimal精度丢失解决办法,不动代码,从驱动层面解决

概述 相信很多人都遇到过&#xff0c;使用sql server数据库&#xff0c;批量插入数据时&#xff0c;BigDecimal类型出现丢失精度的问题&#xff0c;网上也有很多人给出过解决方案&#xff0c;但一般都要修改应用代码&#xff0c;不推荐。 丢失精度的本质是官方的驱动有BUG造成…

机器学习特征-学习篇

一、特征概念 1. 什么是特征 特征是事物可供识别的特殊的征象或标志 在机器学习中&#xff0c;特征是用来描述样本的属性或观测值的变量。它们可以是任何类型的数据&#xff0c;包括数字、文本、图像、音频等。 作用&#xff1a; 特征是训练和评估机器学习模型的基础。好的特…

[基于 Vue CLI 5 + Vue 3 + Ant Design Vue 4 搭建项目] 09 集成 Ant Design Vue

我们要将 Ant Design Vue 集成到项目中 1.首先进入到我们的项目 2.然后使用下面的命令 npm i --save ant-design-vue解释一下这个命令&#xff1a; npm&#xff1a;npm 命令 i&#xff1a;install 的简写 –save&#xff1a;将其保存到 pagckage.json ant-design-vue&am…

PHP随时随地预订民宿酒店预订系统小程序源码

随时随地预订&#xff0c;民宿酒店预订系统让旅行更自由&#xff01; &#x1f30d; 说走就走的旅行&#xff0c;从预订开始 旅行&#xff0c;总是让人心生向往&#xff0c;但繁琐的预订流程却常常让人望而却步。不过&#xff0c;现在有了“随时随地预订民宿酒店预订系统”&am…