HTML5不提供数据库查询能力，复合索引和多字段查询实际由IndexedDB实现；其通过拼接键、多级索引或冗余字段模拟复合索引，多字段筛选需手动构造IDBKeyRange，跨存储“关联”需分步查询并内存过滤。
HTML5 本身不提供数据库查询能力，所谓“复合索引”和“多字段关联查询”实际发生在 IndexedDB（HTML5 标准的客户端数据库）中。它的实现逻辑依赖于对象存储（Object Store）的索引机制，而非 SQL 式 JOIN —— 因为 IndexedDB 是 NoSQL 型键值存储，不支持跨表关联查询。
复合索引的本质是单字段索引的组合模拟
IndexedDB 不原生支持真正意义上的复合索引（如 [a, b, c] 三字段联合索引），但可通过以下方式等效实现：
- 将多个字段拼接成一个唯一字符串作为索引键（例如：
a + '\0' + b + '\0' + c），用IDBKeyRange.bound()进行前缀匹配或范围查询； - 利用多级索引嵌套：先按字段 a 创建主索引，查出结果后，在内存中对字段 b、c 进行过滤（适合数据量小、b/c 筛选条件较松的场景）；
- 在对象存储中预存冗余字段组合（如添加
sortKey: "user_123_status_active"字段），并为其单独建索引，提升查询效率。
多字段查询需手动模拟“关联”逻辑
IndexedDB 没有表关联概念，所谓“多字段关联”通常指：
-
同一对象内多属性筛选：如查找
status === 'active' && type === 'premium' && createdAt >= '2024-01-01'—— 此时应优先为高频组合字段建立索引，并用IDBKeyRange构造复合条件； -
跨对象存储“伪关联”：比如 users 存储用户，orders 存储订单（含
userId字段）。要查“某用户的全部有效订单”，需分两步：先查 users 得到 userId，再用该 ID 查询 orders 索引（index.get(IDBKeyRange.only(userId))），最后在游标遍历中补充其他条件（如 status === 'paid'）。
索引设计的关键实践
高效查询依赖合理建索引，注意以下要点：
立即学习“前端免费学习笔记（深入）”；
- 索引字段顺序影响查询效率：把区分度高、常用于等值匹配的字段放前面（如
userId优于status）； - 避免过度索引：每个索引增加写入开销和存储占用，仅对实际查询路径建索引；
- 使用
unique: false和multiEntry: false默认配置，除非明确需要去重或数组展开； - 升级数据库版本时，用
onupgradeneeded安全添加新索引，旧数据会自动补全索引项。
实际查询代码片段示意
假设有一个 products 对象存储，含字段 category、price、inStock，想查 “electronics 类别下价格 100–500 且有库存”的商品：
const transaction = db.transaction(['products'], 'readonly');
const store = transaction.objectStore('products');
const index = store.index('category_price_stock'); // 已预先创建的拼接索引
// 拼接键格式：'electronics_100_true'
const lower = 'electronics_100_true';
const upper = 'electronics_500_true';
const range = IDBKeyRange.bound(lower, upper, false, false);
const request = index.openCursor(range);
request.onsuccess = function() {
const cursor = this.result;
if (cursor) {
// 额外校验 price 是否真正在 [100, 500] 内（因字符串比较不精确）
const data = cursor.value;
if (data.price >= 100 && data.price <= 500 && data.inStock) {
console.log(data);
}
cursor.continue();
}
};
