What is IndexedDB?

Learn what IndexedDB provides and how it differs from localStorage.

What is IndexedDB?

IndexedDB is a built-in browser database that stores structured data. Unlike localStorage, it can hold large amounts of data, objects and even file blobs. The data is persistent: it survives page reloads and browser restarts.

IndexedDB's API is asynchronous; it never blocks the page while a request is in flight. You receive results through event listeners such as request.onsuccess.

Difference from localStorage

localStorage suits simple key-value pairs: it stores only strings and runs synchronously. IndexedDB holds objects, arrays and blobs directly, runs asynchronously and handles much larger amounts of data.

localStorage.setItem('theme', 'dark');

For small values like settings, localStorage is enough; for rich data such as notes, messages or products, IndexedDB is the better choice.

Exercise Detect IndexedDB support

Check whether 'indexedDB' exists on window using the in operator. If missing, log 'unsupported' with console.log; otherwise log 'supported'.

Show example solution

if (!('indexedDB' in window)) {
  console.log('unsupported');
} else {
  console.log('supported');
}

Test yourself

Which statement is true about IndexedDB?
- Its API is asynchronous and does not block the page
- It can only store strings
- Data is removed when the browser closes
- Data is stored on the server
Show answer

Its API is asynchronous and does not block the page — Correct! IndexedDB's API is asynchronous and can hold large objects.

Access the IndexedDB object

const idb = window.____;

Show answer

const idb = window.indexedDB;

localStorage vs IndexedDB differences

localStorage

stores only strings
IndexedDB

stores objects and blobs
setItem / getItem

synchronous access
request.onsuccess

asynchronous result

Next lesson: Opening a database

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies