浏览器百科:网页存储篇-IndexedDB应用实例(十二)

news2024/11/24 9:06:25

1.引言

在现代Web开发中,IndexedDB作为一种强大的客户端存储技术,越来越受到开发者的青睐。它不仅能够存储大量结构化数据,还提供了高性能的查询和事务支持。在前面的文章中,我们已经详细介绍了IndexedDB的基本概念、使用方法以及在Chrome浏览器中如何调试和管理IndexedDB数据。为了让大家更好地理解和应用这项技术,本篇《浏览器百科:网页存储篇-IndexedDB应用实例(十二)》将通过一些实际的开发实例,展示如何在真实项目中使用IndexedDB进行数据存储和管理,从而帮助开发者更高效地构建功能丰富、性能优异的Web应用。

2.IndexedDB应用实例

首先,我们使用 Vue 3 和 TypeScript 实现了一个简单的网页应用,具体功能如下:

  • 用户可以通过表单输入一个 ID 和一个名称,并点击“Add Item”按钮将这个项目添加到 MyObjectStore对象存储中。添加成功后,会弹出提示框通知用户。
  • 用户可以点击“Get All Items”按钮,从MyObjectStore 对象存储中获取所有项目,并将其显示在页面上。
  • 在每个列表项旁边都有一个“Delete”按钮,用户点击该按钮可以删除相应的项目。删除成功后,会重新获取所有项目并更新显示。
  • 用户可以点击“Clear All Items”按钮,清除MyObjectStore对象存储中的所有项目。清除成功后,会弹出提示框通知用户,并更新显示为空。

2.1 主要代码

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const id = ref<number | null>(null)
const name = ref('')
const items = ref<{ id: number; name: string }[]>([])

let db: IDBDatabase

const openDB = () => {
  return new Promise<void>((resolve, reject) => {
    const request = indexedDB.open('MyDatabase', 1)

    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
      db = (event.target as IDBOpenDBRequest).result
      db.createObjectStore('MyObjectStore', { keyPath: 'id' })
    }

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

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')
    }
    request.onerror = (event: Event) => {
      console.error('Add item error:', (event.target as IDBRequest).error)
    }
  }
}

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

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

const clearAllItems = () => {
  const transaction = db.transaction('MyObjectStore', 'readwrite')
  const objectStore = transaction.objectStore('MyObjectStore')
  const request = objectStore.clear()

  request.onsuccess = () => {
    alert('All items cleared successfully')
    items.value = []
  }
  request.onerror = (event: Event) => {
    console.error('Clear all items error:', (event.target as IDBRequest).error)
  }
}

onMounted(async () => {
  await openDB()
})
</script>
<template>
  <div>
    <h1>IndexedDB-test</h1>
    <form @submit.prevent="addItem">
      <div>
        <label for="id">Key:</label>
        <input type="number" v-model.number="id" required />
      </div>
      <div>
        <label for="name">Value:</label>
        <input type="text" v-model="name" required />
      </div>
      <button type="submit">Add Item</button>
      <button @click="getAllItems">Get All Items</button>
      <button @click="clearAllItems">Clear All Items</button>
    </form>

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.id }}: {{ item.name }}
        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>
<style scoped>
label {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
}

input {
  width: 250px;
  height: 30px;
  margin-top: 10px;
  padding: 5px;
  border-radius: 5px;
}

button {
  margin-top: 20px;
  padding: 10px 15px;
  background-color: rgb(97, 152, 255);
  color: #ffffff;
  border: #ffffff;
  margin-left: 20px;
}

button:hover {
  background-color: rgb(131, 186, 245);
}

ul {
  margin-top: 20px;
}

li {
  margin: 5px 0;
}
</style>

执行该命令来运行程序:

npm run dev

2.2 访问http://localhost:5173/

3.进行测试

3.1 添加数据

打开窗格查看是否添加成功:

3.2 查看已添加的数据

在窗格中验证:

3.3 删除数据

此时,在窗格中查看是否删除成功:

3.4 删除所有数据

此时,在窗格中查看是否删除成功:

4.总结

在本篇《浏览器百科:网页存储篇-IndexedDB应用实例(十二)》中,我们通过一个实际开发实例,详细展示了如何在 Vue 3 和 TypeScript 环境下使用 IndexedDB 进行数据存储和管理。这个实例涵盖了添加、获取、删除单个项目以及清空所有项目的基本操作,帮助开发者在实际项目中更好地应用 IndexedDB。在实际开发中,IndexedDB 提供了强大的本地存储能力和高效的数据查询手段,适用于需要离线支持或需要存储大量结构化数据的 Web 应用。本篇实例为开发者提供了一个良好的入门示例,希望能帮助大家在实际项目中更加高效地应用 IndexedDB,实现功能丰富且性能优异的 Web 应用。

通过实践,可以更好地理解和应用IndexedDB的特性,为开发功能丰富、性能优异的Web应用提供了强大的支持。希望本篇文章能帮助开发者更好地掌握IndexedDB的使用方法,并在实际项目中灵活运用。

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

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

相关文章

RocketMQ 5.0简介

一、概述 Apache RocketMQ 自诞生以来&#xff0c;因其架构简单、业务功能丰富、具备极强可扩展性等特点被众多企业开发者以及云厂商广泛采用。历经十余年的大规模场景打磨&#xff0c;RocketMQ 已经成为业内共识的金融级可靠业务消息首选方案&#xff0c;被广泛应用于互联网、…

机器学习 第9章 聚类

目录 聚类任务性能度量距离计算原型聚类k均值&#xff08;K-Means&#xff09;算法学习向量量化 (LVQ)高斯混合聚类 密度聚类层次聚类 聚类任务 聚类是机器学习中一种重要的无监督学习方法&#xff0c;其目的是将数据集中的数据分成不同的聚类或组&#xff0c;使得同一簇内的样…

GenBook RK3588一款模块化开源ARM笔记本电脑,具有高达32GB内存和模块化扩展功能

GenBook RK3588 是一款以瑞芯微(Rockchip)RK3588为核心的开源笔记本电脑。这款功能强大的CPU集成了4个Cortex-A76、4个Cortex-A55内核和4个Mali G610 图形内核。具有6 TOPS算力的集成 NPU 单元可以有意义地提升本地机器学习任务。这款流行的新芯片允许用户使用许多流行的开源操…

c#进度条实现方法

在使用c#做WinFrom开发时&#xff0c;经常会用到进度条&#xff08;ProgressBar&#xff09;。那么如何才能实现winfrom进度条及进度信息提示呢&#xff1f; 方法一&#xff1a;多线程 使用c#做WinFrom开发&#xff0c;要实现进度条效果就需要用到多线程&#xff0c;如果不采…

【Burpsuite】使用宏更新header(如token)

我们有这样一个网站&#xff0c;登录完成之后&#xff0c;后续的每个请求都会带上jwt&#xff08;json web token&#xff09;去访问接口信息 此时&#xff0c;我们希望实现这样一个功能&#xff1a;当我没有带token或者token过期时&#xff0c;能够自动刷新token。那么就要用到…

C++的STL标准模板库容器--string类

目录 浅浅介绍一下什么是STL&#xff1a; string类需要知道的小知识 auto和范围for&#xff1a; string类的常用接口&#xff1a; 实现一个string类&#xff1a; 1. 成员变量和构造函数&#xff0c;拷贝构造&#xff0c;析构函数 2. string类对象的容量操作 <1>si…

书生浦语三期实战营 [进阶] 茴香豆:企业级知识问答工具实践闯关任务

茴香豆&#xff1a;企业级知识问答工具实践闯关任务 1 Web 版茴香豆 1.1 创建 Web 版茴香豆账户和密码 登录 https://openxlab.org.cn/apps/detail/tpoisonooo/huixiangdou-web&#xff0c;可以看到 Web 版茴香豆的知识库注册页面&#xff0c;在对应处输入想要创建的知识库名…

Spring Cloud 搭建 Gateway 网关与统一登录模块:路径重写、登录拦截、跨域配置

文章目录 一、项目结构项目依赖 二、搭建 Gateway 服务1. 配置 Gateway2. 配置跨域 三、统一登录模块1. 配置 Spring Security2. 创建 Security 配置3. 实现认证过滤器 四、总结 博主介绍&#xff1a;全网粉丝10w、CSDN合伙人、华为云特邀云享专家&#xff0c;阿里云专家博主、…

SpringBoot教程(二十八) | SpringBoot集成Elasticsearch(Java High Level Rest Client方式)

SpringBoot教程&#xff08;二十八&#xff09; | SpringBoot集成Elasticsearch&#xff08;Java High Level Rest Client方式&#xff09; 前言添加maven依赖yml配置ElasticsearchConfig 连接配置类EsUtil 工具类开始测试 前言 由ES官方提供&#xff0c;代码语法和DSL语法相似…

UEFI——获取UEFI MemoryMap

一、MemoryMap简介 首先讲一下什么是MemoryMap&#xff1f; 内存映射&#xff08;Memory Mapping&#xff09;是一种将文件内容映射到进程的虚拟地址空间的技术。在这种机制下&#xff0c;文件可以视为内存的一部分&#xff0c;从而允许程序直接对这部分内存进行读写操作&…

电动车乱停放识别摄像头

电动车乱停放是城市交通管理中常见的问题&#xff0c;给道路通行和停车场管理带来了诸多困扰。为了有效解决这一问题&#xff0c;人们研发了电动车乱停放识别摄像头&#xff0c;这种设备结合了人工智能技术和监控摄像技术&#xff0c;能够实时监测并识别电动车乱停放情况&#…

python日常刷题(二)

前言&#xff1a;本文记录2024年4月9日至2024年4月13日做题时遇到的几个问题&#xff08;错题本&#xff09;&#xff1a; &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;本专栏&#xff1a;python日常刷题 &#x1f380;CSDN主页&#xff1a;愚润求学 文章目录 …

uniapp苹果端与安卓端兼容性问题的处理

目录 第一个问题&#xff0c;苹果端页面有下拉回弹的效果&#xff0c;安卓端没有。解决苹果端的问题&#xff0c;在pages.json中对需要的页面&#xff0c; 第二个问题&#xff0c;安卓端页面滚动到底部触发onReachBottom页面生命周期函数&#xff0c;而苹果端无法触发&#xf…

2024年PDF转换器大集合:哪4款是互联网人的首选?

嘿&#xff0c;朋友们&#xff0c;你们知道吗&#xff1f;那些在办公室里看起来特别能干的大佬们&#xff0c;他们好像总能很快地把各种文件变来变去&#xff0c;好像有什么特异功能似的。告诉你们吧&#xff0c;他们其实就是用了几款特别牛的PDF转换工具&#xff01;今天&…

前端打包装包——设置镜像

1、打包失败&#xff0c;因为没装包&#xff0c;装包失败&#xff0c;因为装包的源错误 npm config get registry npm config set registry https://registry.npmmirror.com/npm install npm run build还是失败&#xff0c;因为缺少了包&#xff0c;在package.json文件中没有包…

Centos7.9 安装Elasticsearch 8.15.1(图文教程)

本章教程,主要记录在Centos7.9 安装Elasticsearch 8.15.1的整个安装过程。 一、下载安装包 下载地址: https://www.elastic.co/cn/downloads/past-releases/elasticsearch-8-15-1 你可以通过手动下载然后上传到服务器,也可以直接使用在线下载的方式。 wget https://artifacts…

Docker 部署 Seata (图文并茂超详细)

部署 Seata ( Docker ) [Step 1] : 创建对应的**seata**数据库, 也就是下面的的**seata.sql**文件 seata.sql [Step 2] : 拉取 Seata 镜像 docker pull seataio/seata-server:1.5.2[Step 3] : 创建目录 ➡️ 创建容器 ➡️ 拷贝文件 ➡️ 授权文件 ➡️ 删除容器 # 创建…

热点文章轻松生成?一篇测评告诉你ChatGPT的神奇能力

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

【视频教程】遥感云大数据在灾害、水体与湿地领域典型案例实践及GPT模型应用

前期我们分别以Javascript和Python为编程语言&#xff0c;成功举办了数期关于GEE遥感大数据分析处理的基础培训课程&#xff0c;得到了来多个行业的学员的广泛参与和支持。应广大科研工作者的要求&#xff0c;本次课程将聚焦目前遥感应用最热门领域之一的灾害、水体及湿地领域&…

多线程篇(阻塞队列- LinkedTransferQueue)(持续更新迭代)

目录 一、简介 二、基本原理 三、jdk8 内部属性 4个常量值 transfer tryAppend take() awaitMatch boolean remove(Object o) 四、jdk17 主要参数 put/offer take() remove() 五、与synchronousqueue 区别 六、知识小结 一、简介 LinkedTransferQueue是一个由…