Day 54

IndexedDB

12 min
JavaScript 100 Days

IndexedDB browser ka powerful database hai — localStorage se zyada capable. Large amounts of structured data, files, blobs store kar sakte hain. Offline-first apps ke liye ideal.

IndexedDB Basics

Database open karo, object store create karo, data CRUD karo.

indexeddb.js
javascript
// Database open karo
const request = indexedDB.open("MyAppDB", 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  
  // Object store = table
  const store = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
  store.createIndex("email", "email", { unique: true });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  
  // ADD user
  function addUser(user) {
    const tx = db.transaction("users", "readwrite");
    const store = tx.objectStore("users");
    store.add(user);
  }
  
  // GET user by id
  function getUser(id) {
    return new Promise((resolve) => {
      const tx = db.transaction("users", "readonly");
      const req = tx.objectStore("users").get(id);
      req.onsuccess = () => resolve(req.result);
    });
  }
  
  addUser({ name: "Zohaib", email: "z@test.com", age: 25 });
  getUser(1).then(user => console.log(user));
};

🎯 Practice Challenge

Notes app banao with IndexedDB — create, read, update, delete notes. Offline bhi kaam kare.