IndexedDB支持多条件查询需结合索引与游标：先用复合索引（如by_city_age）缩小范围，再用游标遍历并JavaScript过滤剩余条件（如active），辅以分批处理和针对性索引优化。
HTML5 本身不提供数据库查询能力，所谓“在 HTML5 中结合索引与游标实现复杂多条件组合查询”，实际是指使用 IndexedDB —— 这是 HTML5 规范中定义的客户端存储标准，支持事务、索引、游标等机制，可模拟类似数据库的查询行为。
理解 IndexedDB 的核心组件：对象仓库、索引与游标
IndexedDB 是基于键值对的 NoSQL 存储，但通过合理建模可支撑多条件查询：
- 对象仓库（Object Store） 类似数据库中的“表”，存储结构化数据（如 {id: 1, name: "张三", age: 28, city: "北京", active: true}）；
-
索引（Index） 是建立在对象仓库字段上的辅助查找结构，支持按非主键字段快速检索（例如在
city或age上创建索引）； - 游标（Cursor） 是遍历数据的机制，可在索引或对象仓库上打开，支持范围查询、顺序/逆序遍历、跳过与限制。
单字段多条件：用 IDBKeyRange 构建复合范围
IndexedDB 原生不支持 SQL 式的 WHERE a > 10 AND b ，但可通过索引 + 范围筛选逼近。关键在于选择合适的索引字段和组合策略：
- 若需查
age ≥ 25 AND age ≤ 35，直接在age字段建索引，用IDBKeyRange.bound(25, 35)获取游标； - 若需查
city === "上海" AND active === true，推荐创建复合索引：store.createIndex("by_city_active", ["city", "active"])，再用IDBKeyRange.only(["上海", true])精确匹配； - 注意：复合索引字段顺序影响可用性，
["city", "active"]支持查city="上海"或city="上海" && active=true，但不支持仅查active=true。
多字段任意组合：客户端过滤 + 游标分批优化
对无法完全由索引覆盖的复杂条件（如 age > 25 AND city IN ["北京","上海"] AND active = true），可行策略是：
- 优先用最有效的索引缩小数据集（例如先用
by_city索引获取所有“北京”“上海”的记录游标）； - 用游标逐条
continue()遍历，对每条记录做 JavaScript 层面的条件判断（record.age > 25 && record.active）； - 为避免阻塞主线程，可配合
setTimeout或requestIdleCallback分批处理； - 对大数据量，考虑预建更多针对性索引（如
by_city_age），或引入轻量库如 idb（封装了 Promise 和高级查询辅助）。
实战片段：按城市+年龄范围+状态三条件查询
假设对象仓库 users 已有索引 by_city_age（字段顺序：["city", "age"]）和 by_active（字段："active"）：
const tx = db.transaction("users", "readonly");
const store = tx.objectStore("users");
const index = store.index("by_city_age");
// 先用复合索引定位城市和年龄范围
const range = IDBKeyRange.bound(["北京", 25], ["北京", 35], false, true);
const req = index.openCursor(range);
req.onsuccess = function (e) {
const cursor = e.target.result;
if (!cursor) return;
// 客户端补过滤 active 字段
if (cursor.value.active === true) {
console.log(cursor.value); // 符合全部条件的记录
}
cursor.continue();
};
IndexedDB 的查询能力取决于索引设计与客户端逻辑协同，不是“写个 SQL 就跑”，而是“建好索引 + 控制游标 + 智能过滤”。掌握这三者，就能在浏览器端高效支撑中等复杂度的数据检索需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
