浏览器内置NoSQL数据库IndexedDB
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