Client-Side Storage Demo

localStorage vs sessionStorage

Both are Web Storage APIs that store key-value pairs in the browser. The difference is persistence:

Feature	localStorage	sessionStorage
Persistence	Permanent (until cleared)	Tab lifetime only
Scope	All tabs/windows (same origin)	Single tab only
Survives browser close	Yes	No
Shared between tabs	Yes	No (each tab has own storage)
Size limit	~5MB	~5MB

Interactive Demo

Try These Experiments

1. Set a value in localStorage, then close and reopen the browser - it's still there!
2. Set a value in sessionStorage, then close the tab - it's gone
3. Open this page in a new tab - localStorage is shared, sessionStorage is separate
4. Open in incognito/private mode - storage is isolated from normal mode
5. Check DevTools → Application → Storage to see the data

The JavaScript API

// localStorage - permanent storage
localStorage.setItem('key', 'value');      // Set
const value = localStorage.getItem('key'); // Get (returns null if missing)
localStorage.removeItem('key');            // Remove one
localStorage.clear();                      // Remove all

// sessionStorage - same API, different persistence
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');
sessionStorage.clear();

// Storing objects (must serialize to JSON)
const user = { name: 'Alice', role: 'admin' };
localStorage.setItem('user', JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem('user'));

When to Use Each

Use localStorage for:

• User preferences (theme, language)
• Cached API responses
• Offline application data
• Shopping cart (for anonymous users)

Use sessionStorage for:

• Form drafts (auto-save as user types)
• Multi-step wizard state
• Temporary UI state
• Data that shouldn't persist after tab closes

Storage Events

You can listen for storage changes from other tabs:

window.addEventListener('storage', (event) => {
    console.log('Storage changed!');
    console.log('Key:', event.key);
    console.log('Old value:', event.oldValue);
    console.log('New value:', event.newValue);
    console.log('URL:', event.url);
});

// Note: This only fires for changes from OTHER tabs/windows

---

Previous: Server Sessions | Back to State Management