HTML5 IndexedDB 是一个低级别的 API，允许浏览器中的客户端存储大量结构化的数据。它是 Web 存储的一部分，为现代 Web 应用提供了比 Web SQL 更强大的存储解决方案，能够存储更复杂的数据类型（例如文件或二进制数据）。与 Web SQL 不同，IndexedDB 使用对象存储而非关系型数据库，且不依赖 SQL 语法。

主要特点：

1. 存储大数据量： IndexedDB 允许存储大量数据（通常为几 GB），比 Web SQL 存储容量大得多。
2. 事务支持： 数据操作（如读取、写入、删除）都在事务中进行，保证了数据的一致性和完整性。
3. 异步操作： 与 Web SQL 不同，IndexedDB 的 API 是异步的，能够处理大量数据而不阻塞浏览器的主线程。
4. 对象存储： 数据是以对象的形式存储的，而不仅仅是键值对（与传统的关系型数据库不同）。

IndexedDB 的基本流程：

1. 打开数据库
2. 创建对象存储（Object Store）
3. 执行事务
4. 添加、查询、删除数据
5. 使用索引提高查询效率
6. 关闭数据库

IndexedDB 示例代码：

1. 打开数据库

使用 indexedDB.open() 打开或创建数据库。若数据库已存在则打开，否则创建一个新的数据库。

let db;
const request = indexedDB.open('MyDatabase', 1);

// 创建数据库时执行
request.onupgradeneeded = function(event) {
  db = event.target.result;
  // 创建对象存储
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('age', 'age', { unique: false });
};

// 打开数据库成功时执行
request.onsuccess = function(event) {
  db = event.target.result;
  console.log("Database opened successfully!");
};

// 打开数据库失败时执行
request.onerror = function(event) {
  console.log("Database error: " + event.target.errorCode);
};

2. 创建对象存储（Object Store）

对象存储是 IndexedDB 中用于存储数据的地方，类似于表格（但不需要定义字段）。每个对象存储都有一个 主键（Key），用于唯一标识对象。

在 onupgradeneeded 事件中，我们会创建对象存储。

const objectStore = db.createObjectStore('users', { keyPath: 'id' });

• keyPath：指定对象存储的主键（可以是对象的属性）。
• 创建索引：我们还可以为特定的属性创建索引，以便进行高效查询。

objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('age', 'age', { unique: false });

3. 添加数据

可以在数据库的事务中使用 add() 或 put() 方法添加数据。put() 方法用于更新已存在的记录，而 add() 方法会添加新记录。

const transaction = db.transaction('users', 'readwrite');
const objectStore = transaction.objectStore('users');

const user = { id: 1, name: 'Alice', age: 25 };
objectStore.add(user);

const user2 = { id: 2, name: 'Bob', age: 30 };
objectStore.add(user2);

transaction.oncomplete = function() {
  console.log("Data added successfully!");
};

transaction.onerror = function() {
  console.log("Error adding data.");
};

4. 查询数据

我们可以通过 get() 或 getAll() 方法查询数据。get() 方法通过主键获取单个记录，getAll() 方法则返回所有记录。

const transaction = db.transaction('users', 'readonly');
const objectStore = transaction.objectStore('users');

// 根据 ID 获取数据
const request = objectStore.get(1);
request.onsuccess = function() {
  console.log(request.result); // 输出：{id: 1, name: 'Alice', age: 25}
};

// 获取所有数据
const requestAll = objectStore.getAll();
requestAll.onsuccess = function() {
  console.log(requestAll.result); // 输出所有用户的数据
};

5. 删除数据

可以通过主键删除指定的数据。

const transaction = db.transaction('users', 'readwrite');
const objectStore = transaction.objectStore('users');

// 删除指定 ID 的数据
const request = objectStore.delete(1);

request.onsuccess = function() {
  console.log("Data deleted successfully!");
};

request.onerror = function() {
  console.log("Error deleting data.");
};

6. 使用索引查询数据

如果对象存储中有索引，我们可以通过索引进行查询。索引可以提高查询效率。

const transaction = db.transaction('users', 'readonly');
const objectStore = transaction.objectStore('users');
const index = objectStore.index('name');

// 使用索引查找特定名称的用户
const request = index.get('Alice');
request.onsuccess = function() {
  console.log(request.result); // 输出：{id: 1, name: 'Alice', age: 25}
};

7. 关闭数据库

当完成操作后，可以关闭数据库连接。

db.close();

优点：

1. 大数据量存储： IndexedDB 支持存储比 Web SQL 和 localStorage 更大的数据量。
2. 异步操作： 非阻塞的异步 API 可以避免阻塞 UI 线程，处理大数据时不会影响用户体验。
3. 支持事务： 支持事务，确保多个操作的一致性和原子性。
4. 复杂数据存储： 可以存储对象、数组、二进制数据等复杂数据类型，而不仅仅是简单的键值对。
5. 查询能力： 支持索引，可以对存储的数据进行高效查询。

缺点：

1. 复杂性较高： 相对于 Web SQL，IndexedDB 使用起来更加复杂，需要理解事务、对象存储、索引等概念。
2. 浏览器支持差异： 虽然 IndexedDB 得到了广泛的支持，但在一些旧版本的浏览器中仍然可能存在不完全支持的情况。
3. 同步与异步 API： IndexedDB 的异步 API 可能会让初学者感到有些复杂（需要使用回调函数或 Promise）。

使用场景：

• 离线 Web 应用： 可以将应用的状态或用户数据存储在浏览器中，以便离线使用。
• 大型数据存储： 需要在客户端存储大量结构化数据的 Web 应用，如邮件客户端、图片编辑器、地图应用等。
• 缓存与持久化： 用于缓存 API 数据或用户设置，使应用能够在不连接网络的情况下继续运行。

总结：

IndexedDB 是一个强大而灵活的浏览器客户端存储解决方案，适用于需要存储大量、结构化数据的 Web 应用。虽然它相对于 Web SQL 更复杂，但它的异步特性和事务支持使它成为开发现代 Web 应用时非常有用的工具。