HTML5 Web IndexedDB 数据库详解

本文涉及的产品
实时数仓Hologres,5000CU*H 100GB 3个月
实时计算 Flink 版,5000CU*H 3个月
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
简介: IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。

IndexedDB 是一种浏览器存储解决方案,允许在用户的浏览器中存储大量结构化数据。它可以存储键值对,并支持索引和事务,适用于需要在客户端进行大量数据操作的应用,比如离线应用。

1. IndexedDB 的基本概念

  • 数据库:IndexedDB 数据库是一个包含对象仓库的集合。
  • 对象仓库:类似于关系数据库中的表,存储数据的集合。
  • :每个对象都有一个唯一的键(主键),用于标识数据。
  • 事务:操作的一组原子性操作,可以确保数据的一致性与完整性。

2. 创建和打开数据库

在使用 IndexedDB 之前,首先需要创建或打开一个数据库。

// 创建或打开数据库
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
   
    const db = event.target.result;
    // 创建一个对象仓库
    const objectStore = db.createObjectStore('myObjectStore', {
    keyPath: 'id' });
};

request.onerror = function(event) {
   
    console.error('Database error:', event.target.error);
};

request.onsuccess = function(event) {
   
    const db = event.target.result;
    console.log('Database opened successfully:', db);
};
AI 代码解读

3. 增加数据

可以通过事务向对象仓库中添加数据。

function addData(db, data) {
   
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.add(data);

    request.onsuccess = function(event) {
   
        console.log('Data added:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Add error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    addData(db, {
    id: 1, name: 'John Doe' });
};
AI 代码解读

4. 读取数据

可以通过事务读取对象仓库中的数据。

function readData(db, id) {
   
    const transaction = db.transaction(['myObjectStore']);
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(id);

    request.onsuccess = function(event) {
   
        console.log('Data read:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Read error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    readData(db, 1);
};
AI 代码解读

5. 更新数据

可以通过事务更新对象仓库中的数据。

function updateData(db, data) {
   
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.put(data); // put用于添加或更新

    request.onsuccess = function(event) {
   
        console.log('Data updated:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Update error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    updateData(db, {
    id: 1, name: 'Jane Doe' });
};
AI 代码解读

6. 删除数据

可以通过事务删除对象仓库中的数据。

function deleteData(db, id) {
   
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.delete(id);

    request.onsuccess = function(event) {
   
        console.log('Data deleted:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Delete error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    deleteData(db, 1);
};
AI 代码解读

7. 事务处理和错误处理

在进行数据库操作时,务必处理错误和进行适当的事务管理。在上述示例中,每个操作都进行了错误处理,以确保操作的安全性。

8. 总结

IndexedDB 提供了一种强大的方式来存储和管理客户端数据,尤其适合需要离线支持和大数据存储的应用。在使用时,需要仔细处理版本变化和事务管理,以确保数据的完整性和一致性。

目录
打赏
0
9
10
1
211
分享
相关文章
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
137 19
Web应用防火墙(WAF)与数据库应用防火墙有什么区别?
Web应用防火墙(WAF)专注于Web应用系统和网站的应用层防护,可有效应对OWASP Top 10等常见攻击,防止SQL注入、CC攻击等。而数据库应用防火墙则位于应用服务器与数据库之间,提供数据库访问控制、攻击阻断、虚拟补丁等高级防护功能,直接保护数据库免受攻击。两者分别针对Web层和数据库层提供不同的安全保护。
141 4
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
655 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
9月前
|
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
496 3
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
194 63
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
293 62
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问