JavaScript 中怎么使用 IndexedDB 的 openCursor 实现带分页条件的数据检索-js教程-PHP中文网

IndexedDB分页需用游标迭代+IDBKeyRange范围查询+手动计数实现，不支持直接limit/offset；核心是建对应索引、用cursor.continue控制位置、计数截断，推荐基于上页末key的范围查询提升性能。

javascript 中怎么使用 indexeddb 的 opencursor 实现带分页条件的数据检索

在 IndexedDB 中，openCursor 本身不直接支持“分页参数”（如 limit、offset），但可以通过游标（cursor）的迭代控制 + 范围查询（IDBKeyRange）+ 手动计数来实现带条件的分页检索。核心思路是：用游标逐条遍历满足条件的数据，并在达到页大小时停止。

一、明确分页逻辑：游标 + 计数 + 范围限制

IndexedDB 的分页不是 SQL 那样的 LIMIT 20 OFFSET 40，而是靠：

用 IDBKeyRange.bound() 或 .only() 等限定查询范围（比如按时间、ID、状态等字段）；
用 cursor.continue(key) 控制游标前进位置（模拟 offset）；
用循环 + 计数器控制返回多少条（模拟 limit）；
注意：索引字段必须已声明为 index，且查询条件需匹配索引路径。

二、基础示例：按 status 索引分页查 10 条待处理数据

假设你有一个对象仓库 orders，已建索引 by_status（路径为 "status"）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

// 打开数据库
const request = indexedDB.open("myApp", 2);
request.onsuccess = function (e) {
  const db = e.target.result;
  const tx = db.transaction("orders", "readonly");
  const store = tx.objectStore("orders");
  const index = store.index("by_status"); // 使用索引
<p>// 查询 status === "pending" 的数据，取第 2 页（每页 10 条 → 跳过前 10 条，取接下来 10 条）
const range = IDBKeyRange.only("pending");
const cursorRequest = index.openCursor(range);</p><p>const results = [];
let skipped = 0;
const pageSize = 10;
const pageNum = 2; // 想取第 2 页 → 跳过 10 条
const skipCount = (pageNum - 1) * pageSize;</p><p>cursorRequest.onsuccess = function (e) {
const cursor = e.target.result;
if (!cursor) return; // 游标到底</p><pre class="brush:php;toolbar:false;">if (skipped <p>};
};</p>

三、更实用的封装函数：支持起始 key 和方向的分页游标

真实场景中建议封装成可复用函数，支持“从某 key 开始向后/向前翻页”，避免每次跳过大量数据（性能更好）：

function fetchPageByIndex(db, storeName, indexName, range, direction = "next", pageSize = 10, startKey = undefined) {
  return new Promise((resolve, reject) => {
    const tx = db.transaction(storeName, "readonly");
    const store = tx.objectStore(storeName);
    const index = store.index(indexName);
<pre class="brush:php;toolbar:false;">let results = [];
let cursorRequest;

if (startKey !== undefined) {
  // 从指定 key 开始（例如上一页最后一条的 id 或 time）
  const keyRange = direction === "next"
    ? IDBKeyRange.lowerBound(startKey, true) // true → 不包含 startKey
    : IDBKeyRange.upperBound(startKey, true);
  cursorRequest = index.openCursor(range && range.intersect ? range.intersect(keyRange) : keyRange, direction);
} else {
  cursorRequest = index.openCursor(range, direction);
}

cursorRequest.onsuccess = function (e) {
  const cursor = e.target.result;
  if (!cursor || results.length >= pageSize) {
    resolve(results);
    return;
  }

  results.push(cursor.value);
  cursor.continue();
};

cursorRequest.onerror = () => reject(cursorRequest.error);

}); }

// 使用示例：获取 status="pending" 的第 1 页（10 条） fetchPageByIndex(db, "orders", "by_status", IDBKeyRange.only("pending"), "next", 10) .then(data => console.log("第 1 页：", data));

// 获取下一页：传入上一页最后一条的 cursor.key（比如是 id=123） fetchPageByIndex(db, "orders", "by_status", IDBKeyRange.only("pending"), "next", 10, 123) .then(data => console.log("下一页：", data));

四、关键注意事项

索引必须存在且匹配查询字段：比如按 createdAt 分页，就得先建 store.createIndex("by_createdAt", "createdAt")；
复合索引支持多条件：如 createIndex("by_status_time", ["status", "createdAt"])，再用 IDBKeyRange.bound(["pending", Date.now()-86400000], ["pending", Date.now()]) 查昨日待处理订单；
游标不能跨事务复用：每次分页都要新开只读事务；
大数据量慎用纯 skip 方式：跳过几千条再取，性能差，优先用“基于最后 key 的范围查询”；
注意游标方向与排序一致：用 "prev" 可向上翻页，但需配合 upperBound 和降序索引（或 keyPath 本身支持倒序）。