HTML IndexedDB Retrieve

Introduction

IndexedDB is a low-level browser API for storing large amounts of structured data on the client. After you insert records, your app needs to retrieve them—to populate lists, restore drafts, or sync offline caches when the user returns.

This tutorial focuses specifically on reading data from IndexedDB: fetching one record with get(), loading everything with getAll(), walking rows with openCursor(), and handling missing keys gracefully.

What You’ll Learn

What Is IndexedDB?

IndexedDB is a transactional, key-value database built into modern browsers. Data lives in object stores as plain JavaScript objects. The API is asynchronous—reads use requests and callbacks (or Promises if you wrap them), so the main thread stays responsive during large fetches.

Reads never block the UI like a synchronous SQL query might. That makes IndexedDB suitable for offline apps, cached catalogs, and progressive web apps that store thousands of records locally.

Setting Up IndexedDB

Before retrieving data, open the database and ensure your object store (and optional indexes) exist:

let db;
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function (event) {
  db = event.target.result;
  const store = db.createObjectStore('myStore', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function (event) {
  db = event.target.result;
  /* db is ready — start readonly transactions here */
};

request.onerror = function (event) {
  console.error('Open failed:', event.target.error.message);
};

Schema setup runs only in onupgradeneeded. After that, every page load opens the existing database and you can read immediately in onsuccess.

Retrieving Data from IndexedDB

To fetch one record by its primary key, use get() inside a readonly transaction:

const tx = db.transaction(['myStore'], 'readonly');
const store = tx.objectStore('myStore');
const request = store.get(1); /* keyPath id = 1 */

request.onsuccess = function () {
  const data = request.result;
  if (data) {
    console.log('Data retrieved:', data);
  } else {
    console.warn('No record with id 1');
  }
};

request.onerror = function (event) {
  console.error('Get failed:', event.target.error.message);
};

For small stores where you need every record at once, modern browsers support getAll():

const tx = db.transaction(['myStore'], 'readonly');
const req = tx.objectStore('myStore').getAll();

req.onsuccess = function () {
  console.log('All records:', req.result); /* array of objects */
};

Using Cursors for Data Retrieval

Cursors walk through records one at a time. Use them when the dataset is large, you need to filter in JavaScript, or you want to process rows without loading all into memory:

const tx = db.transaction(['myStore'], 'readonly');
const store = tx.objectStore('myStore');
const request = store.openCursor();

request.onsuccess = function (event) {
  const cursor = event.target.result;
  if (cursor) {
    console.log('Key:', cursor.key, 'Value:', cursor.value);
    cursor.continue(); /* next record */
  } else {
    console.log('No more entries');
  }
};

request.onerror = function (event) {
  console.error('Cursor error:', event.target.error.message);
};

You can also open a cursor on an index to iterate records sorted by name or filtered by an indexed field:

const index = store.index('name');
const req = index.openCursor();

req.onsuccess = function (event) {
  const cursor = event.target.result;
  if (cursor) {
    console.log(cursor.value.name, cursor.value.email);
    cursor.continue();
  }
};

Handling Errors

Distinguish between a real error and a missing record. get() on a non-existent key succeeds with result === undefined—that is not a failure:

function getContact(db, id) {
  return new Promise(function (resolve, reject) {
    const tx = db.transaction(['contacts'], 'readonly');
    const req = tx.objectStore('contacts').get(id);

    req.onsuccess = function () {
      resolve(req.result); /* may be undefined */
    };
    req.onerror = function () {
      reject(req.error);
    };
    tx.onerror = function () {
      reject(tx.error);
    };
  });
}

getContact(db, 42)
  .then(function (record) {
    if (!record) {
      console.warn('Contact 42 not found');
    } else {
      console.log(record.name);
    }
  })
  .catch(function (err) {
    console.error('Read error:', err.message);
  });

Always use error.message in callbacks, not the legacy errorCode property from older tutorials.

Examples Gallery

These examples demonstrate IndexedDB read patterns. Use Try It Yourself to run live demos in the editor.

const tx = db.transaction(['contacts'], 'readonly');
const getReq = tx.objectStore('contacts').get(1);

getReq.onsuccess = function () {
  const contact = getReq.result;
  if (contact) {
    console.log(contact.name, contact.email);
  } else {
    console.warn('Contact 1 not found');
  }
};

Alex Rivera alex@example.com

const tx = db.transaction(['items'], 'readonly');
const req = tx.objectStore('items').getAll();

req.onsuccess = function () {
  req.result.forEach(function (item) {
    console.log(item.id, item.name);
  });
  console.log('Total:', req.result.length);
};

1 Apple
2 Banana
3 Cherry
Total: 3

const items = [];
const tx = db.transaction(['items'], 'readonly');
const req = tx.objectStore('items').openCursor();

req.onsuccess = function (event) {
  const cursor = event.target.result;
  if (cursor) {
    items.push(cursor.value);
    cursor.continue();
  } else {
    console.log('Loaded', items.length, 'items');
    renderList(items);
  }
};

Loaded 3 items

/* index created: store.createIndex('email', 'email', { unique: true }) */

const tx = db.transaction(['contacts'], 'readonly');
const index = tx.objectStore('contacts').index('email');
const req = index.get('jane@example.com');

req.onsuccess = function () {
  if (req.result) {
    console.log('Found:', req.result.name);
  } else {
    console.warn('No contact with that email');
  }
};

Found: Jane Doe

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IndexedDB Retrieve Example</title>
</head>
<body>
  <h1>IndexedDB Retrieve Example</h1>
  <button type="button" id="retrieve">Retrieve Data</button>
  <p id="result"></p>

  <script>
    let db;
    const request = indexedDB.open('myDatabase', 1);

    request.onupgradeneeded = function (event) {
      const store = event.target.result.createObjectStore('myStore', { keyPath: 'id' });
      store.createIndex('name', 'name', { unique: false });
    };

    request.onsuccess = function (event) {
      db = event.target.result;
      const seedTx = db.transaction(['myStore'], 'readwrite');
      seedTx.objectStore('myStore').put({ id: 1, name: 'Sample', value: 42 });
    };

    document.getElementById('retrieve').addEventListener('click', function () {
      const tx = db.transaction(['myStore'], 'readonly');
      const getReq = tx.objectStore('myStore').get(1);

      getReq.onsuccess = function () {
        const data = getReq.result;
        document.getElementById('result').textContent =
          data ? 'Retrieved: ' + JSON.stringify(data) : 'Not found';
      };
    });
  </script>
</body>
</html>

Retrieved: {"id":1,"name":"Sample","value":42}

🚀 Common Use Cases

• Restore drafts — get(draftId) when the user reopens a form.
• Populate lists — getAll() or cursors to fill todo or message lists offline.
• Login by email — index lookup to find a cached user profile.
• Sync status — read queued items before sending to a server.
• Verify before delete — get() first to show what will be removed.

📝 Notes

• Use readonly transactions for all read operations.
• get() returning undefined means “not found”—not an error.
• getAll() loads every row; use cursors for very large stores.
• Indexes must be created in onupgradeneeded before you can query them.
• All requests in a transaction must complete before the transaction finishes.
• After reading, continue to Update or Delete as needed.

💡 Best Practices