← Lessons

quiz vs the machine

Silver1120

Frontend

The IndexedDB Basics

A transactional, async, object database built into the browser.

5 min read · intro · beat Silver to climb

A real database in the browser

IndexedDB is a low level, asynchronous, transactional database for structured data, far larger than Web Storage. It stores JavaScript objects, not just strings, and supports indexes for fast lookups.

  • Data lives in object stores, similar to tables
  • Each record has a key, either a key path or an explicit key
  • Indexes let you query by fields other than the primary key
  • All reads and writes happen inside transactions

The event driven flow

The classic API is event based. You open a database with a version number, and the upgradeneeded event fires when the version increases, which is the only place you may create object stores and indexes.

Requests like add or get are objects whose onsuccess and onerror handlers deliver the result.

Why async matters

Because operations are asynchronous, IndexedDB never blocks the main thread, making it suitable for large offline datasets that power progressive web apps.

Key idea

IndexedDB is an asynchronous transactional object store; create stores during the upgradeneeded event and wrap all data access in transactions.

Check yourself

Answer to earn rating on the learn ladder.

1. When can you create object stores in IndexedDB?

2. Why is IndexedDB preferred over localStorage for large datasets?