demo · v141

Pagination Demo

Chrome 141 adds a direction option to getAll() and getAllKeys(), plus the new getAllRecords() method that returns complete {key, primaryKey, value} tuples in a single round-trip. Seed 50 records then navigate through them forward or backward — no cursor loop required.

checking IDBObjectStore.getAllRecords…
Database not seeded — click "Seed 50 records" to begin.
Forward pagination →
—
← Reverse pagination
—
#keytitlecategoryscore

old way vs new way

old: cursor loop pre-141

function getPage(db, after, count) {
  return new Promise((resolve) => {
    const tx = db.transaction("items", "readonly");
    const range = IDBKeyRange.lowerBound(after, true);
    const cursor = tx.objectStore("items")
      .openCursor(range, "next");
    const results = [];
    cursor.onsuccess = () => {
      const c = cursor.result;
      if (c && results.length < count) {
        results.push({ key: c.key, value: c.value });
        c.continue(); // N async hops
      } else {
        resolve(results);
      }
    };
  });
}

new: getAll + direction Chrome 141

function getPage(db, after, count, dir) {
  return new Promise((resolve, reject) => {
    const tx = db.transaction("items", "readonly");
    const store = tx.objectStore("items");
    const range = dir === "prev"
      ? IDBKeyRange.upperBound(after, true)
      : IDBKeyRange.lowerBound(after, true);

    // getAllRecords = key + value in one shot
    const req = store.getAllRecords({
      count,
      query: range,
      direction: dir  // "next" | "prev"
    });
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

getAllRecords() record shape

// Each element in the result array is an IDBRecord:
{
  key:        42,               // effective key (index key if used via index)
  primaryKey: 42,               // primary key of the object store record
  value:      { id: 42, ... }   // the stored value — no separate getAll needed
}

// Compare with getAll() which returns values only — no keys!
// And getAllKeys() which returns keys only — no values!

see also