localStorage vs sessionStorage in JavaScript
Both are part of the Web Storage API used to store key-value pairs in the browser — but they differ in scope and lifetime.
🔹 localStorage:
- Data persists even after the browser is closed or page is reloaded.
- Stored data has no expiration (remains until manually cleared).
- Shared across all tabs and windows of the same origin.
- Use case: store user preferences, tokens, theme, etc.
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'
🔸 sessionStorage:
- Data is stored per tab/session and cleared when the tab or browser is closed.
- Not shared across different tabs/windows.
- Use case: temporary form data, session-based authentication.
sessionStorage.setItem('draft', 'Hello!');
const draft = sessionStorage.getItem('draft'); // 'Hello!'
🔁 Common Features:
- Both store strings only (objects need
JSON.stringify). - Same methods:
.setItem(),.getItem(),.removeItem(),.clear()
🧠 Summary:
| Feature | localStorage |
sessionStorage |
|---|---|---|
| Lifespan | Until manually cleared | Until tab/browser closes |
| Scope | All tabs/windows | Single tab only |
| Size Limit | ~5MB | ~5MB |
| Accessible From | Same-origin scripts | Same-origin scripts |
