在现代Web开发中，对客户端和服务器之间的数据交互有着很高的需求。为了实现这种需求，HTML5引入了一种新的API：IndexedDB，它允许开发者在用户的浏览器中存储大量结构化数据。本文将介绍如何使用HTML5的IndexedDB API进行本地数据库操作。

IndexedDB简介

IndexedDB是一种低级API，用于客户端存储大量结构化数据。与普通的JavaScript对象（JSON）相比，IndexedDB可以存储更复杂的数据类型，如数组、对象、日期等。此外，由于数据直接存储在用户设备上，因此IndexedDB提供了离线访问的能力。

创建数据库和集合

要使用IndexedDB，首先需要创建一个数据库实例。可以通过调用window.indexedDB方法来创建一个数据库。该方法接受两个参数：数据库名称和一个配置对象。数据库名称是一个字符串，而配置对象包含了数据库的一些设置。例如，可以使用以下代码创建一个名为"myDatabase"的数据库：

const dbName = "myDatabase";
const dbConfig = {
  version: 1.0,
  storagePolicy: "localStorage", // 使用localStorage作为存储引擎
};

const request = window.indexedDB.open(dbName, dbConfig);

创建数据库后，需要创建一个集合来存储数据。集合类似于SQL中的表，用于存储一组相关的数据。可以通过调用request.onupgradeneeded事件来实现。例如：

request.onupgradeneeded = function (event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myData", { keyPath: "id" }); // 创建一个名为"myData"的对象存储
};

在上面的例子中，我们创建了一个名为"myData"的对象存储，并指定了一个主键（keyPath）为"id"。这意味着每个存储在"myData"集合中的数据项都必须有一个唯一的"id"属性。

添加数据和查询数据

有了集合之后，就可以向其中添加数据了。可以通过调用objectStore.add方法来添加数据。例如：

const transaction = db.transaction(["myData"], "readwrite"); // 开始一个读写事务
const objectStore = transaction.objectStore("myData"); // 获取对象存储引用
const data = { id: 1, name: "Alice", age: 30 }; // 要添加的数据项
objectStore.add(data); // 添加数据到集合中
transaction.oncomplete = function () { console.log("数据添加成功！"); }; // 当事务完成时输出提示信息

要从集合中查询数据，可以使用objectStore.get方法。例如，要查询所有年龄大于等于30岁的人的数据，可以这样做：

const transaction = db.transaction(["myData"], "readonly"); // 开始一个只读事务
const objectStore = transaction.objectStore("myData"); // 获取对象存储引用
const index = objectStore.index("age"); // 获取按年龄排序的索引
const range = IDBKeyRange.bound([30, Infinity], [Infinity, Infinity]); // 定义查询范围（包含所有年龄大于等于30岁的记录）
const request = index.getAll(range); // 执行查询请求
request.onsuccess = function (event) { console.log("查询结果：", event.target.result); }; // 当查询完成时输出结果
transaction.oncomplete = function () { console.log("只读事务完成！"); }; // 当事务完成时输出提示信息