← Back to LocalStorage Chapter
Storage Types

🗄️ IndexedDB Introduction — Browser Mein Database

indexedDB.open("myDB", 1)

IndexedDB browser mein full NoSQL database hai — hundreds of MB structured data store kar sakti hai. localStorage se alag (5MB, strings only), IndexedDB objects store karta hai, indexes support karta hai, aur proper async API hai. Browser ka MongoDB socho.

Key concepts: Database (one per origin), Object Stores (collections/tables jaisa), Indexes (fast queries ke liye), Transactions (atomic operations), Requests (async operations with success/error callbacks). JavaScript objects directly store karo — JSON.stringify ki zaroorat nahi.

🛺
localStorage vs IndexedDB: localStorage = notepad (5MB, strings, sync, simple). IndexedDB = filing cabinet (100MB+, objects, async, complex queries). Simple key-value ke liye localStorage. Large structured data ke liye IndexedDB.

Code Example

HTML — IndexedDB Introduction — Browser Mein Database
// Database open (ya create) karo
const request = indexedDB.open("BiryaniDB", 1);

// Pehle open pe object store banao
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  
  if (!db.objectStoreNames.contains("orders")) {
    const store = db.createObjectStore("orders", { keyPath: "id", autoIncrement: true });
    store.createIndex("itemName", "itemName", { unique: false });
    store.createIndex("status", "status", { unique: false });
  }
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("Database opened:", db.name);
};

// ADD data (transaction use karke)
function addOrder(order) {
  const db = getDB();
  const tx = db.transaction("orders", "readwrite");
  const store = tx.objectStore("orders");
  store.add(order);
}

// GET data by key
function getOrder(id) {
  const db = getDB();
  const tx = db.transaction("orders", "readonly");
  const store = tx.objectStore("orders");
  const request = store.get(id);
  
  request.onsuccess = () => console.log("Order:", request.result);
}

// INDEX se query
function getOrdersByStatus(status) {
  const db = getDB();
  const tx = db.transaction("orders", "readonly");
  const store = tx.objectStore("orders");
  const index = store.index("status");
  const request = index.getAll(status);
  
  request.onsuccess = () => {
    console.log(`"${status}" orders:`, request.result);
  };
}

// DELETE data
function deleteOrder(id) {
  const db = getDB();
  const tx = db.transaction("orders", "readwrite");
  tx.objectStore("orders").delete(id);
}

// Example data
addOrder({
  itemName: "Mutton Biryani",
  qty: 2,
  price: 900,
  status: "pending",
  date: new Date().toISOString()
});
indexedDB.open(name, version)Database open ya create karo — version schema changes ke liye
onupgradeneededVersion upgrade pe object stores create/modify karo
createObjectStore()"Table" banao — MongoDB collection jaisa
keyPathPrimary key field — MongoDB _id jaisa
autoIncrement: trueIDs auto-generate — SQL AUTO_INCREMENT jaisa
createIndex()Index banao us field pe fast queries ke liye
transaction()Transaction start karo — "readwrite" ya "readonly"
store.add()Naya record insert karo
store.get()Primary key se record lo
index.getAll()Index value match hone pe saare records lo
store.delete()Primary key se record delete karo

✅ When to Use

  • Bade datasets (100MB+)
  • Offline-first apps (PWA data sync)
  • Complex queries (filter, sort, range)
  • Files/blobs store karna browser mein
  • Structured data jisko indexes chahiye

❌ When NOT to Use

  • Simple key-value (localStorage easier hai)
  • 5MB se chhota data (localStorage kaafi hai)
  • Devices ke beech sync chahiye (backend DB use karo)
  • Quick prototypes (localStorage faster implement hota hai)
💡
IndexedDB API verbose aur callback-heavy hai. Dexie.js ya idb jaisi library use karo cleaner Promise-based API ke liye. Dexie.js 20 lines IndexedDB code ko 3 lines mein convert karti hai. Production ke liye hamesha recommended.