IndexedDB PWA Demo

Demo

Enter text below and hit Save to persist it in a local IndexedDB instance. Then reload the page. Your text will still be here.

Persistent note

Database logs

IndexedDB vs LocalStorage

The web comes with two distinct long-term local storage solutions: LocalStorage and IndexedDB. The latter has a few advantages over the latter:

• Massive Storage Capacity: Stores hundreds of megabytes or gigabytes, far exceeding the ~5MB limit of LocalStorage.
• Non-Blocking (Asynchronous): Runs in the background so your app interface never freezes or stutters during large saves.
• Handles Complex Data: Saves files, images (Blobs), and JavaScript objects directly without needing to convert them to text first.
• High-Performance Search: Uses indexes to look up specific data instantly, rather than scanning through every single item.
• Data Integrity (Transactions): Ensures that if a group of changes fails halfway through, the database rolls back so data never gets corrupted.

IndexedDB in PWAs

For PWAs, IndexedDB isn't just a better option. It is the only option for managing structured data offline. This is because PWAs rely on Service Workers, which run on a separate background thread completely cut off from the main web page.

If you try to access LocalStorage inside a Service Worker, your code will crash because LocalStorage is synchronous and not thread-safe. IndexedDB, however, acts as a "shared brain" accessible by both your main interface and your background Service Worker. This allows your app to accept user input while offline, save it to the database, and let the Service Worker pick it up to sync with the server later.

API

Code

Links & Documentation

• IndexedDB on MDN