HTML IndexedDB 是一种客户端存储技术，它允许在用户的浏览器中存储大量结构化数据，IndexedDB 提供了一种轻量级的解决方案，用于在客户端存储大量数据，而无需使用服务器端数据库，IndexedDB 支持多种数据模型，包括对象存储、键值对存储和文档存储。

在 IndexedDB 中，数据被组织成一个或多个对象存储空间（object store），每个对象存储空间包含一组数据记录，每个数据记录都有一个唯一的键（key），用于标识和访问该记录，键可以是任何有效的 JavaScript 值，包括字符串、数字、日期等，还可以为对象存储空间创建索引（index），以提高数据的查询性能。

以下是关于 IndexedDB 中的键、键路径和索引名称的一些基本概念和技术教学：

1、键（Key）

在 IndexedDB 中，每个数据记录都有一个唯一的键，用于标识和访问该记录，键可以是任何有效的 JavaScript 值，包括字符串、数字、日期等，创建一个新的数据记录时，需要提供一个键作为参数。

const dbRequest = window.indexedDB.open("myDatabase", 1);
dbRequest.onupgradeneeded = function (event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
};

在上面的示例中，我们创建了一个名为 "myObjectStore" 的对象存储空间，并为其指定了一个名为 "id" 的键路径，这意味着数据记录的键将自动设置为其 "id" 属性的值。

2、键路径（Key Path）

键路径是一个字符串，用于指定如何在数据记录中找到键，当创建新的数据记录时，可以使用键路径将记录的键与其属性关联起来，假设我们有一个名为 "person" 的数据记录，它具有 "firstName"、"lastName" 和 "age" 属性，我们可以使用以下代码创建一个名为 "people" 的对象存储空间，并为每个数据记录指定一个键路径：

const dbRequest = window.indexedDB.open("myDatabase", 1);
dbRequest.onupgradeneeded = function (event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("people", { keyPath: "firstName + lastName" });
};

在上面的示例中，我们将对象存储空间的键路径设置为 "firstName + lastName"，这意味着每个数据记录的键将自动设置为其 "firstName" 和 "lastName" 属性的组合值。

3、索引名称（Index Name）

索引是一种特殊的对象存储空间，它允许快速访问具有特定属性的数据记录，可以为对象存储空间创建多个索引，以提高数据的查询性能，索引的名称必须在创建对象存储空间时指定。

const dbRequest = window.indexedDB.open("myDatabase", 1);
dbRequest.onupgradeneeded = function (event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id", indexes: [{ name: "nameIndex", keyPath: "name" }] });
};

在上面的示例中，我们为 "myObjectStore" 对象存储空间创建了一个名为 "nameIndex" 的索引，并将其与 "name" 属性关联起来，这意味着可以快速访问具有特定名称的数据记录。

4、查询数据记录

要查询具有特定键或满足特定条件的数据记录，可以使用 get 方法或 openCursor 方法。

// 根据键查询数据记录
const transaction = db.transaction("myObjectStore", "readonly");
const objectStore = transaction.objectStore("myObjectStore");
const request = objectStore.get("someKey");
request.onsuccess = function (event) {
  const dataRecord = event.target.result;
};

// 根据条件查询数据记录
const transaction = db.transaction("myObjectStore", "readonly");
const objectStore = transaction.objectStore("myObjectStore");
const index = objectStore.index("nameIndex");
const request = index.openCursor();
request.onsuccess = function (event) {
  const cursor = event.target.result;
  if (cursor) {
    const dataRecord = cursor.value;
    console.log(dataRecord); // 输出满足条件的数据记录
    cursor.continue(); // 继续遍历下一个数据记录
  } else {
    console.log("没有更多满足条件的数据记录"); // 如果已遍历所有数据记录，则输出提示信息
  }
};

IndexedDB 是一种轻量级的解决方案，用于在客户端存储大量结构化数据，在 IndexedDB 中，数据被组织成一个或多个对象存储空间，每个对象存储空间包含一组数据记录，每个数据记录都有一个唯一的键，用于标识和访问该记录，可以为对象存储空间创建多个索引，以提高数据的查询性能，通过使用 IndexedDB，可以在不依赖服务器端数据库的情况下，实现客户端数据的高效存储和访问。