Storage Types

💾 localStorage Full API — Complete Guide

localStorage.setItem("key", "value")

localStorage sabse common browser storage hai — simple key-value pairs jo browser band karne ke baad bhi rehte hain. 5-10MB limit per origin.

Core methods: setItem() data store karta hai, getItem() retrieve karta hai, removeItem() ek key delete karta hai, clear() sab delete karta hai, key() index se key deta hai, length count deta hai. Sab values strings mein store hoti hain.

🛺

Yaad Rakhna: Sirf strings! Objects ke liye JSON.stringify() use karo, retrieve karne ke liye JSON.parse(). Parse karne se pehle hamesha null-check karo.

Code Example

HTML — localStorage Full API — Complete Guide

// Data set karo
localStorage.setItem("username", "devinhyd");
localStorage.setItem("order", JSON.stringify({item: "Biryani", qty: 2}));

// Data get karo
const name = localStorage.getItem("username"); // "devinhyd"
const order = JSON.parse(localStorage.getItem("order") || "null");

// Check exists ya nahi
if (localStorage.getItem("username") !== null) {
  console.log("User mil gaya");
}

// Saare items iterate karo
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(key, value);
}

// Ek item remove karo
localStorage.removeItem("username");

// Saaf karo (DANGEROUS!)
localStorage.clear();

// Error handling (private browsing throw karta hai)
try {
  localStorage.setItem("test", "value");
} catch (e) {
  console.error("Storage available nahi:", e);
}

// Cross-tab sync StorageEvent se
window.addEventListener("storage", (e) => {
  console.log("Key change hui:", e.key);
  console.log("Purani value:", e.oldValue);
  console.log("Nayi value:", e.newValue);
});

setItem(key, value)Key-value pair store karo (dono strings)

getItem(key)Key se value lo — string ya null return karta hai

JSON.stringify()Object/array ko string mein convert karo storage ke liye

JSON.parse() || "null"String se wapas object banao — null-safe

lengthTotal items ki count

key(index)Index se key name lo (order guaranteed nahi)

removeItem(key)Ek key-value pair delete karo

clear()Is origin ka SAB data delete karo

try-catchZaroori — private browsing errors throw karta hai

StorageEventDoosre tab mein storage change hone pe fire hota hai

✅ When to Use

User preferences (theme, language)
Form data persistence
Shopping cart items
Remember me functionality
Jo data page refresh pe bhi rehna chahiye

❌ When NOT to Use

Sensitive data (passwords, tokens) — httpOnly cookies use karo
Bade datasets (IndexedDB use karo)
Data jo server se sync hona chahiye (API + backend use karo)

💡

Hamesha keys ko prefix karo collisions avoid karne ke liye: `myapp_user`, `myapp_cart`. Auth tokens ke liye localStorage kabhi mat use karo — XSS attacks steal kar sakti hain. httpOnly cookies use karo.

← Back to LocalStorage Chapter