IndexedDB

IndexedDB is a browser database used to store large amounts of structured data on the client side.

It can store complex data, files, and blobs, and it uses indexes to support efficient searching.

IndexedDB = Client-side browser database for large structured data

One-line idea: IndexedDB = Asynchronous browser database for large, structured, persistent client-side data.

Core Concepts

Why It Matters

Frontend applications sometimes need more powerful storage than localStorage or sessionStorage.

IndexedDB is useful when the app needs to store large, structured, persistent data inside the browser.

It is commonly used for:

• offline support
• large datasets
• complex data models
• files and blobs
• efficient searching
• transactional updates

Small simple data -> localStorage / sessionStorage
Large structured data -> IndexedDB

How IndexedDB Works

IndexedDB is a JavaScript-based object-oriented database.

It is transactional like an SQL-based database, but it does not use fixed-column tables.

Instead, it stores data in object stores.

Database -> Object Stores -> Records -> Indexed by keys

Before using IndexedDB, the app usually needs to:

1. Open a database
2. Create object stores
3. Start a transaction
4. Add, read, update, or delete records
5. Use indexes for efficient search

Important IndexedDB APIs

API	Purpose
indexedDB.open	Opens a database connection or creates one if it does not exist
IDBDatabase	Represents the database connection
IDBObjectStore	Represents an object store where records are stored
IDBTransaction	Runs database operations as a single transaction

indexedDB.open

indexedDB.open() opens a connection to a database.

If the database does not already exist, it can be created.

const request = indexedDB.open("todoDB", 1);

This is the starting point for working with IndexedDB.

IDBDatabase

IDBDatabase represents a connection to the database.

It allows you to:

• create object stores
• delete object stores
• modify object stores
• create transactions

Important methods include:

createObjectStore(name, options)
deleteObjectStore(name)
transaction(storeNames, mode)

Example idea:

const store = db.createObjectStore("todos", {
  keyPath: "id",
  autoIncrement: true,
});

IDBObjectStore

IDBObjectStore represents a collection of records inside the database.

It provides methods to:

• add records
• retrieve records
• delete records
• update records

Object Store = Collection of stored objects

Example:

store.add({
  task: "Learn IndexedDB",
});

IDBTransaction

IDBTransaction represents a transaction on the database.

It allows multiple operations to run as a single unit.

Transaction = Group of database operations handled together

This helps keep database operations consistent.

Practical Examples

Dexie

Dexie is a wrapper library for IndexedDB.

It simplifies IndexedDB usage and improves the developer experience.

Dexie = Easier API on top of IndexedDB

Instead of writing low-level IndexedDB code, Dexie lets you define a database and work with object stores more easily.

Dexie Todo Example

This example creates a Todo database using Dexie.

// Creates a DB instance named todoDB
const db = new Dexie("todoDB");

// Creates an object store named todos with an auto-incremented id
db.version(1).stores({
  todos: "++id,task",
});

The database name is:

todoDB

The object store name is:

todos

The schema means:

++id -> auto-incremented id
task -> indexed field

DOM Elements

The app selects form and list elements from the page.

const todoForm = document.getElementById("todoForm");
const todoInput = document.getElementById("todoInput");
const todoList = document.getElementById("todoList");

These elements are used to:

• read todo input
• submit a new todo
• display stored todos

Add Todo

The addTodo() function adds a new record into the todos object store.

function addTodo() {
  db.todos
    .add({
      task: todoInput.value,
    })
    .then(displayTodos);

  todoInput.value = "";
}

What happens:

Read input value
Add it to IndexedDB
Refresh todo list
Clear input

Display Todos

The displayTodos() function reads all records from IndexedDB and renders them in the UI.

function displayTodos() {
  db.todos.toArray().then((todos) => {
    while (todoList.firstChild) {
      todoList.removeChild(todoList.firstChild);
    }

    todos.forEach((todo) => {
      const listItem = document.createElement("li");

      listItem.textContent = todo.task;

      todoList.appendChild(listItem);
    });
  });
}

toArray() retrieves all records from the todos object store as an array.

Then the UI is cleared and rebuilt from the database records.

Form Submit

The form submit event prevents the default page reload and saves the todo.

todoForm.addEventListener("submit", function (event) {
  event.preventDefault();

  addTodo();
});

This keeps the app working like a client-side application.

Initial Load

The app displays saved todos when the page loads.

displayTodos();

This is useful because IndexedDB data persists across browser sessions until it is explicitly deleted.

Complete Dexie Example

const db = new Dexie("todoDB");

db.version(1).stores({
  todos: "++id,task",
});

const todoForm = document.getElementById("todoForm");
const todoInput = document.getElementById("todoInput");
const todoList = document.getElementById("todoList");

function addTodo() {
  db.todos
    .add({
      task: todoInput.value,
    })
    .then(displayTodos);

  todoInput.value = "";
}

function displayTodos() {
  db.todos.toArray().then((todos) => {
    while (todoList.firstChild) {
      todoList.removeChild(todoList.firstChild);
    }

    todos.forEach((todo) => {
      const listItem = document.createElement("li");

      listItem.textContent = todo.task;

      todoList.appendChild(listItem);
    });
  });
}

todoForm.addEventListener("submit", function (event) {
  event.preventDefault();

  addTodo();
});

displayTodos();

Size Limit

IndexedDB can store much more data than localStorage or sessionStorage.

The PDF mentions that more than 100MB of data is available.

IndexedDB is used for large datasets.

Actual limits may depend on browser storage behavior and available device storage.

Performance

IndexedDB operations are asynchronous.

This is important because database operations should not block the application.

IndexedDB operations -> asynchronous -> does not block the main app flow

IndexedDB is better suited for larger data compared to synchronous browser storage APIs.

Data Persistence

Data stored in IndexedDB persists across browser sessions.

It remains stored until:

• the user deletes browser data
• the app deletes it using JavaScript
• the browser clears storage under storage pressure

IndexedDB data persists like localStorage, but supports much larger and more complex data.

Data Structure

IndexedDB stores data in key-value format.

The value can be a complex data structure.

IndexedDB can store objects supported by the structured clone algorithm.

This means it can store more than simple strings.

localStorage -> strings only
IndexedDB -> objects, structured data, files, blobs

IndexedDB also supports indexes, which allow high-performance searches.

Security

IndexedDB data is protected by the same-origin policy.

This means scripts from the same origin can access the data.

However, it still has security concerns.

Important points:

• any script running on the same origin can access IndexedDB
• it can be exposed through XSS attacks
• data is not encrypted by default
• sensitive data should be encrypted before storing
• avoid storing highly sensitive data if security is required

IndexedDB is powerful storage, but not automatically secure storage.

When to Use

Use IndexedDB when the app needs large, persistent, structured client-side storage.

Good use cases:

• large datasets
• offline support
• complex data models
• binary data like images, files, and blobs
• efficient querying using indexes
• complex transactions requiring ACID-like behavior

Example:

Offline app stores many todos, files, or structured records locally.

When Not to Use

Avoid IndexedDB when the data is small, simple, temporary, or sensitive.

Do not use IndexedDB for:

• small simple values
• temporary session-only data
• synchronous data access requirements
• highly sensitive data
• data that does not need persistence
• simple preferences that fit better in localStorage

If the data is small and simple, IndexedDB may be unnecessary.

IndexedDB vs localStorage vs sessionStorage

Feature	IndexedDB	localStorage	sessionStorage
Best for	Large structured data	Small persistent data	Temporary tab data
Data type	Objects, files, blobs	Strings only	Strings only
Persistence	Across browser sessions	Across browser sessions	Until tab closes
API type	Asynchronous	Synchronous	Synchronous
Search support	Indexes supported	No indexes	No indexes
Transactions	Supported	Not supported	Not supported
Use case	Offline database-like storage	Preferences and small cached values	Temporary workflow data

IndexedDB Table

Feature	IndexedDB
Purpose	Store large structured client-side data
API type	Asynchronous
Data format	Key-value with complex objects
Storage size	More than 100MB mentioned in the PDF
Persistence	Across browser sessions
Indexes	Supported
Transactions	Supported
Binary data	Supports files and blobs
Security risk	Accessible to same-origin JavaScript
Best for	Offline apps, large datasets, complex data models

Interview Revision

Quick Revision Checklist

• Use IndexedDB for large structured data.
• Use it when offline support is needed.
• Use object stores to organize records.
• Use transactions for grouped operations.
• Use indexes for efficient searching.
• Use Dexie to simplify IndexedDB usage.
• Avoid IndexedDB for small simple values.
• Avoid synchronous access expectations.
• Avoid storing sensitive data without protection.
• Encrypt sensitive data before storing if required.

Frequently Asked Interview Questions

1. What is IndexedDB?

IndexedDB is a browser database used to store large amounts of structured data on the client side.

2. Why is IndexedDB important?

Frontend applications sometimes need more powerful storage than localStorage or sessionStorage.

3. What practical rule should you remember?

Use IndexedDB for large structured data. Use it when offline support is needed.

Memory Trick

Why It Matters → How IndexedDB Works → Important IndexedDB APIs

One-Line Summary

IndexedDB = Asynchronous browser database for large, structured, persistent client-side data.

Final Mental Model

Small persistent string data -> localStorage
Temporary tab data -> sessionStorage
Large structured offline data -> IndexedDB
Need easier IndexedDB usage -> Dexie
Need sensitive secure storage -> be careful, IndexedDB is not encrypted by default