Browser Storage

---

Storage Types

Three main storage mechanisms

Type	Persistence	Scope	Size Limit
localStorage	Persistent	Origin	~5-10MB
sessionStorage	Session	Tab	~5-10MB
Cookies	Configurable	Domain	~4KB

"Browser storage includes localStorage for persistent data, sessionStorage for session data, and cookies for small data with server access."

---

localStorage

Persistent, domain-scoped storage

// Set
localStorage.setItem("key", "value");

// Get
const value = localStorage.getItem("key");

// Remove
localStorage.removeItem("key");

// Clear all
localStorage.clear();

• Persists after browser close
• Shared across tabs (same origin)
• ~5-10MB limit
• String values only

"localStorage persists data across browser sessions, is domain-scoped, and stores string values up to ~5-10MB."

---

sessionStorage

Tab-scoped, session-only

sessionStorage.setItem("key", "value");
const value = sessionStorage.getItem("key");
sessionStorage.removeItem("key");

• Cleared when tab closes
• Tab-specific (not shared)
• ~5-10MB limit
• String values only

"sessionStorage stores data for a single tab session, cleared when the tab closes, with similar API to localStorage."

---

Cookies

Small, sent with requests

// Set
document.cookie = "name=value; expires=date; path=/";

// Get (manual parsing)
const cookies = document.cookie;

// Better: use library or framework

• Sent with every HTTP request
• ~4KB limit
• Can be HTTP-only (secure)
• Domain and path scoped

"Cookies are small data sent with HTTP requests, limited to ~4KB, and can be HTTP-only for security."

---

When to Use What

localStorage = persistent, sessionStorage = temporary, cookies = server needs

Use Case	Storage Type
User preferences	localStorage
Shopping cart	sessionStorage or localStorage
Authentication tokens	Cookies (HTTP-only) or localStorage
Session data	sessionStorage
Server needs data	Cookies

"Use localStorage for persistent user data, sessionStorage for temporary session data, and cookies when the server needs the data."

---

Storage Events

Listen for storage changes

window.addEventListener("storage", (e) => {
  console.log(e.key); // Changed key
  console.log(e.newValue); // New value
  console.log(e.oldValue); // Old value
});

• Fires when storage changes in other tabs
• Doesn't fire in the same tab
• Useful for synchronization

"Storage events fire when localStorage or sessionStorage changes in other tabs, enabling cross-tab communication."

---

Limitations

Size limits + same-origin + strings only

• Size limits: localStorage/sessionStorage ~5-10MB, cookies ~4KB
• Same-origin policy: Only accessible from same origin
• String values: Must stringify objects
• Synchronous: Blocks main thread

"Storage has size limits, same-origin restrictions, stores only strings, and synchronous operations can block the main thread."

---

Best Practices

✅ Stringify objects before storing ✅ Handle quota exceeded errors ✅ Use try-catch for storage operations ✅ Clear old data periodically ✅ Don't store sensitive data in localStorage ✅ Use HTTP-only cookies for tokens

---

IndexedDB

Advanced, structured storage

• Large storage (~50% of disk)
• Structured data (not just strings)
• Asynchronous API
• Indexed queries
• More complex than localStorage

"IndexedDB provides advanced structured storage with larger capacity and asynchronous operations, but with more complexity."

---

"Browser storage includes localStorage for persistent domain-scoped data, sessionStorage for tab-specific session data, and cookies for small server-accessible data. localStorage and sessionStorage have ~5-10MB limits and store strings, while cookies are ~4KB and sent with requests. Storage events enable cross-tab communication. IndexedDB provides advanced structured storage for larger datasets."

---

🧠 Ultra-Short Cheat Sheet

localStorage (persistent, ~5-10MB)
sessionStorage (session, ~5-10MB)
Cookies (~4KB, sent with requests)
String values only
Same-origin policy
Storage events
IndexedDB (advanced)