当前位置：首页 > news >正文

浏览器内置NoSQL数据库IndexedDB

news 2026/2/17 9:55:43

IndexedDB - 浏览器内容数据库

indexedDB 是一种浏览器内置的NoSQL数据库，它使用键值对存储数据，用于在客户端存储大量结构化数据。它支持离线应用程序和高效的数据检索，可以在 Web 应用程序中替代传统的 cookie 和 localStorage。
IndexDB是一种在浏览器中内置的NoSQL数据库，用于在客户端存储和检索数据。它提供了一种持久存储数据的方式，可以在离线状态下使用。

使用 indexedDB 需要以下步骤：

打开数据库：使用 indexedDB.open() 方法打开一个数据库，如果数据库不存在，则会创建一个新的数据库。
创建对象存储空间：使用 createObjectStore() 方法创建一个对象存储空间，用于存储数据。可以为每个对象存储空间设置一个名称和一个键路径，键路径用于指定对象存储空间中的每个对象的唯一标识符。
存储数据：使用 add() 或 put() 方法将数据存储到对象存储空间中。add() 方法用于向对象存储空间中添加新的数据，如果该数据已经存在，则会抛出错误。put() 方法用于向对象存储空间中添加或更新数据。
检索数据：使用 get() 或 getAll() 方法从对象存储空间中检索数据。get() 方法用于检索指定键路径的数据，getAll() 方法用于检索对象存储空间中的所有数据。
删除数据：使用 delete() 方法从对象存储空间中删除指定键路径的数据。
关闭数据库：使用 close() 方法关闭数据库连接。

需要注意的是，indexedDB 使用异步 API，需要使用回调函数或 Promise 处理返回结果。此外，indexedDB 只能在支持该 API 的浏览器中使用，需要检查浏览器是否支持 indexedDB API。

indexedDB 和 localStorage 的区别

indexedDB 和 localStorage 都是浏览器提供的客户端存储方案，它们之间的区别主要有以下几点：

数据存储方式：localStorage 存储的是字符串类型的数据，而 indexedDB 存储的是结构化数据。indexedDB 支持存储复杂的数据类型，例如对象、数组等，而 localStorage 只能存储字符串类型的数据。
存储容量：localStorage 的存储容量通常为 5MB 左右，而 indexedDB 的存储容量通常为几百 MB 或几 GB。indexedDB 可以存储大量的数据，适用于需要存储大量结构化数据的应用程序。
数据检索方式：indexedDB 支持基于索引的高效数据检索，可以通过索引快速查询数据。而 localStorage 只能遍历整个数据集合进行数据检索，效率较低。
事务支持：indexedDB 支持事务操作，可以确保数据的一致性和完整性。而 localStorage 不支持事务操作，无法保证数据的一致性和完整性。
浏览器支持：indexedDB API 在较新版本的浏览器中得到支持，而 localStorage API 在大多数浏览器中都得到支持。

综上所述，indexedDB 更适合存储大量结构化数据，并且支持高效的数据检索和事务操作；而 localStorage 更适合存储少量简单的字符串类型数据。

demo演示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>IndexedDB</title></head><body>IndexedDB</body><script>const db = indexedDB.open('myDatabase', 1);let connection;db.onerror = function (e) {console.log('打开数据库失败');};db.onsuccess = function (e) {console.log('打开数据库成功')connection = e.target.result;// connection.close();};// 当数据库version变化的时候会触发这个回调，那么数据库从无到有也必然会发生版本变化，所以数据库初始化的时候必然会触发一次这个函数db.onupgradeneeded = function (e) {connection = e.target.result;connection.createObjectStore('myObjectStore', { keyPath: 'id' });};setTimeout(() => {const transaction = connection.transaction('myObjectStore', 'readwrite');const store = transaction.objectStore('myObjectStore');// 新增// const add = store.add({//     id: 1,//     name: 'pcm'// });// add.onsuccess = () => {//     console.log('add success');// };// // 更新// const update = store.put({//     id: 1,//     name: 'pcs'// });// update.onsuccess = () => {//     console.log('update success');// };// 查询// const read = store.get(1);// read.onsuccess = () => {//     console.log('read success', read);// };// 删除const remove = store.delete(1);remove.onsuccess = () => {console.log('remove');};}, 1000);</script>
</html>

keyPath是IndexDB中用于定义对象存储空间中每个对象的唯一键的属性。这个键可以是任何一个对象中的属性，例如ID、名称或日期等。在创建对象存储空间时，可以通过指定keyPath属性来定义唯一键。这样，在添加、更新或删除数据时，可以使用这个唯一键来引用和操作对象。

补充：
不是所有数据库操作都必须通过事务来进行。事务（Transaction）是数据库管理系统（DBMS）中的一个重要概念，用于确保数据库操作的一致性和完整性。事务是一系列数据库操作的单个逻辑工作单元，要么全部执行成功，要么全部回滚（撤销），以保持数据库在任何时间点都处于一致状态。

虽然事务提供了一种确保数据完整性的机制，但并不是所有的数据库操作都需要使用事务。以下是一些情况：

简单查询： 对于只涉及到读取而不涉及写入的简单查询，通常不需要使用事务。例如，SELECT语句可以独立执行，而不需要事务的保障。
单一操作： 当某个数据库操作是独立的、不依赖其他操作的时候，也可以不使用事务。例如，插入一条新纪录，如果这个操作不依赖于其他操作的结果，可能可以不使用事务。
不需要一致性保障： 在某些特定的情况下，如果不需要对数据库的一致性进行强制保障，那么可以选择不使用事务。这通常发生在对实时性要求较高、而一致性要求相对较低的应用中。

然而，在涉及到多个数据库操作、需要一致性保障、需要保证原子性、一致性、隔离性和持久性（ACID属性）的情况下，事务就显得尤为重要。在复杂的业务逻辑中，使用事务能够确保数据库的数据始终保持在一致的状态。

参考链接：https://www.yuque.com/qingfengaibiancheng/arvmg8/ga6ceg

参考链接2：https://www.bilibili.com/video/BV11V4y1Z7uJ/?spm_id_from=333.337.search-card.all.click&vd_source=4c263677a216945c0d21ca65ee15a5f9

浏览器内置NoSQL数据库IndexedDB

IndexedDB - 浏览器内容数据库

indexedDB 和 localStorage 的区别

demo演示：

相关文章：

浏览器内置NoSQL数据库IndexedDB

网络参考模型与标准协议（二）-TCP/IP对等模型详细介绍

万宾科技智能井盖传感器，预防城市道路安全

GCC/Make/CMake 工具链

GO抽象工厂模式

Linux 磁盘/分区/修复命令

php一句话木马免杀

深度学习人体跌倒检测 -yolo 机器视觉 opencv python 计算机竞赛

轻松整理文件夹，将视频文件全部归类到另一个文件夹！

存储服务器特征是什么

Conditional GAN

OOM问题排查+Jvm优化

链表：C++实现

使用JMX监控ZooKeeper和Kafka

蓝桥等考C++组别七级008

sam和mobilesam导出预处理的onnx

开源与闭源：大模型发展的双重走向

c# 逆变 / 协变

electron使用better-sqlite3打包失败(electron打包有进程没有界面)

2.6文件服务器

Docker 离线安装指南

C++_核心编程_多态案例二-制作饮品

python/java环境配置

YSYX学习记录（八）

对WWDC 2025 Keynote 内容的预测

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

微信小程序云开发平台MySQL的连接方式

Linux离线（zip方式）安装docker

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？