Why should you care?

localStorage is small and synchronous; IndexedDB handles bigger async storage.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

// Simplified — real apps use idb library or wrappers
const request = indexedDB.open("MyDB", 1);
request.onupgradeneeded = () => {
  request.result.createObjectStore("notes", { keyPath: "id" });
};
request.onsuccess = () => console.log("DB ready");

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• open is async.
• onupgradeneeded creates stores.
• CRUD uses transactions — more verbose than localStorage.

Practice next

1. Open database and create object store in onupgradeneeded.
2. Log success in onsuccess.
3. Compare quota in Application tab.
4. Bump DB version to add a second object store for drafts.
5. Sketch read/write transaction flow in comments.

Remember

Async key-value + indexes Good for offline data More setup than localStorage

ScriptVerse offline catalog

Retail PWA caches product catalog in IndexedDB for browsing without network.

Outcome: IndexedDB supports larger structured offline data than localStorage allows.