JavaScript

🗄️ IndexedDB in JavaScript – Complete Tutorial

IndexedDB is a powerful browser database that allows you to store large amounts of structured data. Unlike localStorage andsessionStorage, IndexedDB can store objects, arrays, files, images, and other complex data efficiently.

📌 What is IndexedDB?

IndexedDB is a NoSQL, object-based database built into modern browsers. It stores data in Object Stores instead of tables and performs all operations asynchronously.

>>"IndexedDB is designed for storing large amounts of structured data inside the browser."

💡 Why Use IndexedDB?

📦 Store large amounts of data (hundreds of MBs or more, browser dependent)
📱 Build offline web applications
📝 Save user-generated content
🖼️ Store images, videos, and files
⚡ Faster searching using indexes

🏗 IndexedDB Terminology

Term	Description
Database	Container that holds object stores.
Object Store	Similar to a table in SQL.
Record	A single stored object.
Key	Unique identifier for each record.
Index	Used for fast searching.
Transaction	Performs read/write operations safely.

📂 Opening a Database

Use indexedDB.open() to create or open a database.

Open Database

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

request.onerror = () => {
  console.log("Database failed to open");
};

request.onsuccess = () => {
  console.log("Database opened successfully");
};

🏗 Creating an Object Store

Object stores are created inside the onupgradeneeded event, which runs when the database is first created or its version changes.

Create Object Store

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

request.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.createObjectStore("students", {
    keyPath: "id"
  });
};

➕ Adding Data

Insert Record

const transaction = db.transaction(
  "students",
  "readwrite"
);

const store = transaction.objectStore("students");

store.add({
  id: 1,
  name: "John",
  age: 22
});

📖 Reading Data

Get Record

const transaction = db.transaction(
  "students",
  "readonly"
);

const store = transaction.objectStore("students");

const request = store.get(1);

request.onsuccess = () => {
  console.log(request.result);
};

📋 Reading All Records

Get All Records

const transaction = db.transaction(
  "students",
  "readonly"
);

const store = transaction.objectStore("students");

const request = store.getAll();

request.onsuccess = () => {
  console.log(request.result);
};

✏️ Updating Data

Use put() to insert or update a record.

Update Record

store.put({
  id: 1,
  name: "Alice",
  age: 24
});

🗑️ Deleting Data

Delete Record

store.delete(1);

🧹 Clearing an Object Store

Clear Store

store.clear();

🔍 Creating an Index

Indexes allow you to search records efficiently by properties other than the primary key.

Create Index

store.createIndex(
  "name",
  "name",
  { unique: false }
);

🔎 Searching Using an Index

Search by Name

const index = store.index("name");

const request = index.get("John");

request.onsuccess = () => {
  console.log(request.result);
};

📜 Iterating Records with Cursor

Using Cursor

const request = store.openCursor();

request.onsuccess = (event) => {
  const cursor = event.target.result;

  if (cursor) {
    console.log(cursor.value);

    cursor.continue();
  }
};

🛠 Complete Example

Student Database Example

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

request.onupgradeneeded = (event) => {
  const db = event.target.result;

  db.createObjectStore("students", {
    keyPath: "id"
  });
};

request.onsuccess = (event) => {
  const db = event.target.result;

  const tx = db.transaction(
    "students",
    "readwrite"
  );

  const store = tx.objectStore("students");

  store.add({
    id: 1,
    name: "John",
    age: 22
  });

  const getReq = store.get(1);

  getReq.onsuccess = () => {
    console.log(getReq.result);
  };
};

📊 IndexedDB vs Local Storage vs Session Storage

Feature	IndexedDB	Local Storage	Session Storage
Storage Size	Very Large (browser dependent)	~5–10 MB	~5 MB
Stores Objects Directly	✅ Yes	❌ No	❌ No
Asynchronous	✅ Yes	❌ No	❌ No
Supports Searching	✅ Yes	❌ No	❌ No
Best For	Large structured data	Persistent small data	Temporary data

⚠️ Advantages

📦 Stores complex JavaScript objects directly.
💾 Supports very large storage capacities.
⚡ Non-blocking asynchronous operations.
🔍 Fast queries using indexes.
📱 Excellent for offline-first applications.

❌ Limitations

📚 More complex API than Local Storage.
⏳ All operations are asynchronous.
🧠 Requires understanding of transactions and object stores.

Note

For modern projects, many developers use libraries likeidb or Dexie.js to simplify working with IndexedDB while still leveraging its power.

✅ Best Practices

🏗 Create object stores during onupgradeneeded.
🔑 Choose meaningful primary keys.
🔍 Create indexes for frequently searched fields.
🧹 Close the database when it's no longer needed.
⚠️ Handle onsuccess and onerror events for every request.

🎯 Summary

IndexedDB is the most powerful client-side storage option available in web browsers. It supports large datasets, structured objects, indexes, and asynchronous transactions, making it ideal for offline applications, caching, file storage, and complex browser-based apps. While it has a steeper learning curve than Local Storage or Session Storage, it provides significantly greater flexibility and scalability.