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
分享
相关文章
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
102 5
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
138 6
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
96 0
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
AI助理

你好,我是AI助理

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

登录插画

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

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