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