跳转到主内容
极星编程网:以代码为星,赴技术山海!

HTML5中IDBKeyRange实现数值范围检索的边界配置

IDBKeyRange 是 IndexedDB 中定义键范围的核心接口,支持 lowerBound、upperBound、bound 和 only 四种方式精确控制区间边界(含/不含端点),用于 cursor 或 get 查询,要求键类型一致且实例不可变。 IDBKeyRange 是 IndexedDB 中用于定义键范围的核心接口,特别适合做数值区间查询。它不直接执行检索,而是作为参数传给
objectStore.openCursor()
或
objectStore.get()
等方法,告诉数据库“我要查哪些键”。关键在于边界配置——即如何精确控制是否包含端点值。 单边范围:from、to 最常用 数值检索最常见的是“大于等于某值”或“小于等于某值”,对应
IDBKeyRange.lowerBound()
和
IDBKeyRange.upperBound()
:
IDBKeyRange.lowerBound(10)
→ 匹配键 ≥ 10(含 10)
IDBKeyRange.lowerBound(10, true)
→ 匹配键 > 10(不含 10)
IDBKeyRange.upperBound(100)
→ 匹配键 ≤ 100(含 100)
IDBKeyRange.upperBound(100, true)
→ 匹配键 < 100(不含 100) 第二个布尔参数叫
open
,
true
表示开区间(不包含端点),
false
或省略表示闭区间(包含端点)。这是控制边界的唯一开关。 双边范围:bound 精确圈定区间 当需要“10 到 100 之间”这类查询时,用
IDBKeyRange.bound()
: 立即学习 “ 前端免费学习笔记(深入) ”;
IDBKeyRange.bound(10, 100)
→ 10 ≤ 键 ≤ 100(两端都闭)
IDBKeyRange.bound(10, 100, true, false)
→ 10 < 键 ≤ 100(左开右闭)
IDBKeyRange.bound(10, 100, true, true)
→ 10 < 键 < 100(两端都开) 参数顺序为
(lower, upper, lowerOpen, upperOpen)
。注意:如果下界大于上界,会抛出
DataError
异常,需提前校验。 唯一特殊值:only 用于精确匹配
IDBKeyRange.only(value)
不是范围,而是“只匹配这个值”。它等价于
bound(value, value)
,但语义更清晰,且性能略优:
IDBKeyRange.only(42)
→ 只返回键严格等于 42 的记录 若该键不存在,游标直接结束,不会报错 适用于主键查询或已知唯一索引字段的查找,比用
get()
多一层范围语义保障。 实际使用注意事项 数值范围检索依赖键路径的数据类型一致性。如果存储的键是字符串形式的数字(如
"10"
),比较将按字典序进行,
"2" > "10"
会成立,导致结果错乱: 确保键是真正的 number 类型(如用 autoIncrement 或显式 number 键) 若必须用字符串数字,统一补零或转成固定长度格式(不推荐,易出错) 在 objectStore 创建时指定
keyPath
并启用
autoIncrement: false
,手动控制键类型 另外,IDBKeyRange 本身不可变,每次查询需新建实例;它也不校验数据是否存在,仅约束游标遍历范围。

相关文章