Stop 20 · Advanced TopicsTopics · 4/14

IndexedDB

In short

localStorage is fine for a theme setting. For thousands of notes, offline orders or saved images, you need a real database inside the browser. That's IndexedDB.

A low-level, transactional browser database for storing large amounts of structured data client-side — far more capable than localStorage for complex offline data.

The jaadu pulls open a library card catalogue drawer next to a fridge with a few sticky notes.

Think of it like this

Library card catalogue vs sticky notes

localStorage is a few sticky notes on your fridge: quick, but only short text. IndexedDB is the library's catalogue drawers, with labelled cards, sorted indexes and room for whole books. More setup, far more capacity.

Watch it happen

Inside a browser database

notes-app (v1)

notes store

n1: Revise DBMS

n2: Pay fees

index: byDate

outbox store

1/5openDB creates a database called notes-app at version 1.

The big ideas

What you need to know

Stores real objects

It saves objects, arrays, dates, Blobs and files, not just strings like localStorage.

Object stores and indexes

An object store is like a table. Indexes let you look up records by fields other than the key.

Asynchronous

Reads and writes don't block the page, so big data won't freeze your UI.

Versioned schema

You bump a version number to add stores or indexes, and handle the change in an upgrade function.

See it in code

Walk through the code

1import { openDB } from "idb";2 3const db = await openDB("notes-app", 1, {4  upgrade(db) {5    const store = db.createObjectStore("notes", { keyPath: "id" });6    store.createIndex("byDate", "createdAt");7  },8});9 10await db.put("notes", { id: "n1", text: "Revise DBMS", createdAt: Date.now() });11const notes = await db.getAllFromIndex("notes", "byDate");

1/4idb wraps IndexedDB in promises.

The raw IndexedDB API uses events and callbacks. The small idb library wraps it in promises, so you can use await like this.

Save yourself the pain

Common mistakes

Oops

Treating IndexedDB as permanent storage that can never be cleared.

Do this instead

Browsers may clear it under storage pressure, and users can wipe it. Sync important data to a server.

Oops

Changing the schema without bumping the version number.

Do this instead

Increase the version in openDB and create new stores or indexes inside upgrade.

Your mission

Build an offline notes box

~30 min

Quick check

Why would you pick IndexedDB over localStorage for an offline email app?

Go deeper

1Store a small structured dataset in IndexedDB using the raw API or a wrapper like `idb`.
2Compare its capabilities (indexes, transactions, large storage) to localStorage.
3Learn it's the storage layer most offline-first apps and PWAs rely on.