What is indexedDB?

JavaScriptMiddle~2 min read

Definition

IndexedDB is a low-level API for storing data in the browser, which lets you create object stores, run queries, build indexes, and use transactions.

Put simply: IndexedDB is a mini database in the browser, running on the client. It saves data to disk, so it is not cleared when the tab or browser restarts.

1. Main features of IndexedDB

Capability	Description
Stores objects, not strings	You can store whole JS objects without manual serialization
Works asynchronously	Through promises or callbacks
Supports indexes	You can quickly search data by keys
Uses transactions	Operations run atomically
Supports versioning	Every database update comes with a version change
Stores large amounts of data	You can store tens of megabytes, even binary files (Blob, ArrayBuffer)

2. Example of creating and using IndexedDB

javascript

// 1. Open (or create) the database
const request = indexedDB.open('myDatabase', 1);

// 2. Event fired the first time the database is created
request.onupgradeneeded = (event) => {
  const db = event.target.result;

  // Create an "object store" (like a table)
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

// 3. On a successful open
request.onsuccess = (event) => {
  const db = event.target.result;

  // Add a record
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  store.add({ id: 1, name: 'Tim', age: 25 });

  tx.oncomplete = () => console.log('Data saved!');
};

Here:

open('myDatabase', 1) creates or opens a database at version 1;
createObjectStore('users') creates a store for objects (like a table);
keyPath: 'id' marks the id field as the unique key;
transaction('users', 'readwrite') creates a transaction for writing.

3. Reading data

javascript

const request = indexedDB.open('myDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');

  const userRequest = store.get(1);

  userRequest.onsuccess = () => {
    console.log('User:', userRequest.result);
  };
};

4. Working with indexes

javascript

const request = indexedDB.open('myDatabase', 1);

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');
  const index = store.index('name');

  const req = index.get('Tim');
  req.onsuccess = () => console.log('Found:', req.result);
};

Indexes let you search not only by keyPath, but by any field of the object.

5. Deleting and updating

javascript

// Update
store.put({ id: 1, name: 'Tim', age: 26 });

// Delete
store.delete(1);

6. Working with Promises (through a wrapper)

The native IndexedDB API is bulky. For convenience, developers often use the idb library (an official wrapper from Google):

javascript

import { openDB } from 'idb';

const db = await openDB('myDatabase', 1, {
  upgrade(db) {
    db.createObjectStore('users', { keyPath: 'id' });
  },
});

await db.put('users', { id: 1, name: 'Tim' });
const user = await db.get('users', 1);
console.log(user);

The idb library makes IndexedDB pleasant to use, through async/await and promises.

7. IndexedDB vs localStorage

Property	IndexedDB	localStorage
Capacity	Up to hundreds of MB	~5 MB
Data type	Objects, files, Blob	Strings only
Asynchronous	Yes	No
Speed	Faster at large volumes	Slower
Search by key	Has indexes	Direct access only
Usage	Cache, offline apps, PWA	Simple settings and tokens

Summary

Parameter	Description
API	Asynchronous, event-driven
Stores	Objects, files, binary data
Main structure	Object Store (like a table)
Uses	Transactions, indexes
Where it's used	PWAs, offline storage, data caches, serverless apps

Remember it simply: IndexedDB is a "database right inside the browser", where you can store a lot of data, like in SQL, but in the form of JavaScript objects.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.