Beginner-Friendly Topic
Take your time — it's perfectly normal to re-read this topic 2–3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
localStorage & sessionStorage
Web Storage lets you save data in the browser — persisting user preferences, form data, tokens, and cached content. localStorage persists until manually cleared. sessionStorage clears when the tab closes.
Web Storage
- localStorage — Persists forever (until cleared manually or by code). Shared across tabs
- sessionStorage — Cleared when tab/window closes. Separate per tab
- setItem(key, value) — Save: localStorage.setItem('theme', 'dark'). Value must be string
- getItem(key) — Read: localStorage.getItem('theme'). Returns null if not found
- removeItem(key) — Delete one item. clear() — Delete all items
- Storage limit — ~5-10MB per origin. Use for preferences, not large data
- JSON — Store objects: setItem('user', JSON.stringify(user)). Parse on read
Web Storage Code
// localStorage — persists forever
// Save
localStorage.setItem("theme", "dark");
localStorage.setItem("language", "en");
// Read
const theme = localStorage.getItem("theme");
console.log("Theme:", theme); // "dark"
// Store objects (must use JSON)
const user = { name: "Alice", age: 25, isAdmin: true };
localStorage.setItem("user", JSON.stringify(user));
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log("User:", savedUser.name); // "Alice"
// Remove
localStorage.removeItem("theme");
// Check if exists
if (localStorage.getItem("user")) {
console.log("User data exists!");
}
// Utility function
function storage(key, value) {
if (value === undefined) {
// GET
const item = localStorage.getItem(key);
try { return JSON.parse(item); }
catch { return item; }
}
// SET
localStorage.setItem(key, JSON.stringify(value));
}
// Usage
storage("settings", { theme: "dark", fontSize: 16 });
console.log(storage("settings")); // { theme: "dark", fontSize: 16 }
// sessionStorage — same API, but clears on tab close
sessionStorage.setItem("tempData", "goes away on close");Tip
Tip
Always wrap JSON.parse(localStorage.getItem()) in try/catch. Corrupted or manually-edited data in localStorage will crash your app. Provide fallback defaults for missing data.
localStorage persists forever; sessionStorage clears when the tab closes
Common Mistake
Warning
Storing sensitive data (passwords, tokens) in localStorage. It's accessible to any JavaScript on the page including XSS attacks. Use httpOnly cookies for authentication tokens instead.
Practice Task
Note
Build a persistent settings panel: (1) Theme, font size, and language preferences saved to localStorage. (2) Load settings on page load. (3) Add a 'Reset to defaults' button that clears saved settings.
Quick Quiz
Key Takeaways
- Web Storage lets you save data in the browser — persisting user preferences, form data, tokens, and cached content.
- localStorage — Persists forever (until cleared manually or by code). Shared across tabs
- sessionStorage — Cleared when tab/window closes. Separate per tab
- setItem(key, value) — Save: localStorage.setItem('theme', 'dark'). Value must be string