31. What is IndexedDB?

S
Soumya Jana
Sun Mar 09 2025

What is IndexedDB?

IndexedDB is a client-side, NoSQL database that allows web applications to store large amounts of structured data inside a user's browser. It is useful for applications that need offline functionality, fast data retrieval, or persistent storage beyond a single session.

It provides:

  • Indexed Storage: Efficient querying using indexes.
  • Asynchronous API: Doesn't block the main thread.
  • Transactions: Ensures data integrity.
  • Large Data Storage: Unlike localStorage, which has a size limit, IndexedDB can store large blobs and files.

Basic IndexedDB Example

Step 1: Open a Database

javascript
let db; const request = indexedDB.open("MyDatabase", 1); request.onsuccess = function(event) { db = event.target.result; console.log("Database opened successfully"); }; request.onerror = function(event) { console.log("Error opening database:", event.target.errorCode); };

Step 2: Create an Object Store

When the database version changes, the onupgradeneeded event is triggered. We use it to create an object store.

javascript
request.onupgradeneeded = function(event) { let db = event.target.result; if (!db.objectStoreNames.contains("users")) { let userStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true }); userStore.createIndex("name", "name", { unique: false }); } };
  • Object Store (users): Stores user data.
  • KeyPath (id): Auto-increments for each entry.
  • Index (name): Enables searching users by name.

Step 3: Add Data

javascript
function addUser(name, age) { let transaction = db.transaction(["users"], "readwrite"); let store = transaction.objectStore("users"); let request = store.add({ name: name, age: age }); request.onsuccess = function() { console.log("User added successfully"); }; request.onerror = function(event) { console.log("Error adding user:", event.target.error); }; }
  • readwrite mode is used since we are modifying data.

Step 4: Retrieve Data

javascript
function getUser(id) { let transaction = db.transaction(["users"], "readonly"); let store = transaction.objectStore("users"); let request = store.get(id); request.onsuccess = function(event) { console.log("User:", event.target.result); }; request.onerror = function() { console.log("Error retrieving user"); }; }
  • This fetches a user by id.

Step 5: Delete Data

javascript
function deleteUser(id) { let transaction = db.transaction(["users"], "readwrite"); let store = transaction.objectStore("users"); let request = store.delete(id); request.onsuccess = function() { console.log("User deleted successfully"); }; request.onerror = function() { console.log("Error deleting user"); }; }
  • Deletes a user based on id.

When to Use IndexedDB?

  • Progressive Web Apps (PWAs) needing offline storage.
  • Storing large datasets like images, files, or cached API responses.
  • Fast lookups using indexes.

Comparison with Other Storage Methods

FeaturelocalStoragesessionStorageIndexedDB
Storage Limit~5MB~5MBLarge (hundreds of MBs)
Data TypeStringsStringsObjects, Blobs, Files
Indexed Search
Transactions
Asynchronous

IndexedDB is best for structured data, whereas localStorage is good for small key-value pairs.

Let me know if you need further explanations! 🚀

Related Posts:

View All Related Posts
Sign In To Write A Comment
Copyright © 2025 codewithjana.com