Web Storage Overview
Modern web browsers offer several ways to store data on the client side. The most common mechanisms are localStorage, sessionStorage, and Cookies.
1. localStorage
localStorage stores data with no expiration date. Data persists even after closing the browser or restarting the computer.
// Save item
localStorage.setItem('theme', 'dark');
// Retrieve item
const theme = localStorage.getItem('theme');
- Capacity: ~5MB per origin.
- Scope: Accessible by any client script on the same origin.
2. sessionStorage
Similar to localStorage, but data is automatically wiped when the tab or window session closes.
sessionStorage.setItem('draft_input', 'Form data...');
3. Cookies
Cookies are primarily used for server communication and session management. For authentication tokens, always use HttpOnly and SameSite flags to mitigate XSS and CSRF risks.
Set-Cookie: session_id=xyz; Secure; HttpOnly; SameSite=Strict
Summary
Use localStorage for persistent UI settings, sessionStorage for transient tab state, and HttpOnly Cookies for authentication credentials.