深入理解 IndexedDB：索引与游标查询的高效应用

在 Web 应用开发中，数据存储与高效查询至关重要。IndexDB 作为浏览器端强大的本地数据库，为开发者提供了灵活的数据管理方案。其中，索引和游标查询是提升数据检索效率的核心功能，本文将深入剖它们的原理与使用方法。

准备工作

为了便于介绍索引与游标查询, 我们需要在开始前, 向IndexDB 数据库中添加如下测试数据。

1. 索引查询

索引是提升查询性能的关键。所谓的索引查询, 就是使用对象存储记录中的值的属性查询对应的记录。因此在创建索引时，应仔细考虑哪些字段将被频繁用于搜索，并确保这些字段具有良好的选择性和唯一性。选择性高的字段能更精准地筛选数据，而唯一性则避免重复数据干扰查询结果。

1.1. 创建索引

在 IndexDB 中，可在数据库onupgradeneeded事件中创建索引。

在IDBObjectStore 对象存储库对象上具有createIndex方法, 使用该方法创建索引。该方法接受三个参数:

javascript 复制代码

createIndex(indexName, keyPath, options)

indexName: 创建的索引的名称
keyPath: 索引要使用的键路径
options: 配置对象。包括unique, multiEntry等配置项

在下面的示例代码中我们创建了单索引和复合索引。

unique属性设置为false表示允许索引字段存在重复值；若设为true，则同一索引值只能对应一条记录。

1.2. 使用索引进行查询

索引创建完成后，可通过索引快速检索数据。当数据库成功打开（onsuccess事件触发），可通过以下方式使用索引查询：

需要注意的是，使用索引查询时，每次只会返回符合条件的键值最小的一条记录。若需获取多条记录，可结合游标查询实现。

2. 游标查询

游标（Cursor）是IndexedDB中用于遍历对象存储空间中的数据的机制。通过游标，可以按照指定的顺序遍历对象存储空间中的数据，并对数据进行操作。

2.1. 基本使用

使用游标的基本步骤如下：

创建一个事务，并获取对象存储空间。
使用对象存储空间的openCursor()方法打开游标。
在游标的遍历过程中，可以对每个数据项执行操作，并通过游标的continue()方法继续遍历下一项。

基本使用示例

使用游标时，需要在onsuccess成功回调中里拿到result对象，判断是否取完了数据：

若数据已取完，result是undefined;
若未取完，则result是个IDBCursorWithValue对象，需调用continue()方法继续取数据。也可以根据自己需求, 对数据进行过滤。

接下来, 我们具体了解一下 openCursor开启游标方法, 该方法是 IDBObjectStore 提供的方法, 并返回一个IDBRequest 对象, 此方法目的是用一个游标来遍历一个对象存储空间。

ini 复制代码

var request = ObjectStore.openCursor(query, direction);

openCursor 方法接受两个参数:

query(可选): 要查询的键或者IDBKeyRange。指定查询范围。
direction(可选): IDBCursorDirection指定游标遍历的方向: 有效的值有 "next" 、"nextunique" 、"prev" 和 "prevunique"。默认值是 "next"。

如果以上两个参数都为空的话，默认是所有的数据的以升序的顺序遍历。

2.2. 游标范围查询

游标范围（Cursor Range）是用于限制游标遍历的范围的机制。通过游标范围，可以指定游标遍历的起始点和结束点。实现更精准的数据筛选。

以下代码展示了如何创建游标范围，从键值为 2 到 4 的范围内遍历数据

查询结果:

2.3. 游标方向

next: 默认值, 从数据源开始位置遍历
nextunique: 从数据源开始遍历;当取值有重复时，只获取一次。
prev: 从数据源的最后位置位置开取值
prevunique: 从数据源的最后位置开始取值，只获取一次。

通过在openCursor()方法中传入方向参数，可改变遍历顺序，例如修改之前示例, 给openCursor()方法添加第二个参数：

javascript 复制代码

// 打开游标
const cursorRequest = objectStore.openCursor(range, "prev");

查询结果就会变成倒序查询:

游标的范围, 方向的使用可以实现更灵活的数据遍历和操作，例如按照指定条件过滤数据、按照指定顺序排序数据等。

2.4. 在索引上使用游标

除了在对象存储空间上使用游标，IndexDB 还支持在索引对象上使用游标。在索引上使用游标时，数据将按照索引字段的顺序进行遍历，方便对特定字段进行排序和筛选：

游标使用方式：

在对象存储空间上使用: objectStore.openCursor()
在索引对象上使用: index.openCursor()

示例

查询结果:

可以看到查询结果是按照name索引进行的排序

当然,我们也可以利用IDBKeyRange.only() 检索指定名称的数据。

javascript 复制代码

const range = IDBKeyRange.only("李四");

// 使用索引打开游标
const cursorRequest = index.openCursor(range);

查询结果:

若索引字段存在重复值，可通过nextunique或prevunique方向参数过滤重复记录，确保每次仅返回键值最小的记录。

3. 总结

IndexDB 的索引和游标查询功能为 Web 应用提供了高效、灵活的数据检索与遍历方案。合理使用索引可显著提升查询性能，而游标则赋予开发者对数据的精细化操作能力。在实际开发中，根据业务需求综合运用这两种技术，能够打造出响应迅速、数据处理能力强大的 Web 应用。随着 Web 技术的不断发展，IndexDB 的应用场景也将愈发广泛，值得开发者深入学习与探索。

以上文章全面介绍了 IndexDB 索引和游标查询。你若觉得某些部分还需调整，或是想补充其他内容，欢迎随时告诉我。

如果觉得本文对你有帮助，希望能够给我点赞支持一下哦 💪 也可以关注wx公众号：程序员付杰 ，一起学习编程技能