Local Storage, Session Storage, and Cookies in JavaScript

1. Local Storage

• Purpose: Stores data in the browser that persists even after the browser is closed.
• Lifespan: Permanent until explicitly cleared by the user or program.
• Storage Limit: Usually 5-10 MB per domain.
• Accessibility: Only accessible on the client-side (browser), not sent with HTTP requests.

Example:

// Store data
localStorage.setItem('username', 'Alice');

// Retrieve data
const username = localStorage.getItem('username');
console.log(username); // Alice

// Remove data
localStorage.removeItem('username');

// Clear all local storage
localStorage.clear();

// Store data
localStorage.setItem('username', 'Alice');

// Retrieve data
const username = localStorage.getItem('username');
console.log(username); // Alice

// Remove data
localStorage.removeItem('username');

// Clear all local storage
localStorage.clear();

2. Session Storage

• Purpose: Stores data for the current session only.
• Lifespan: Data is cleared when the browser tab is closed.
• Storage Limit: Similar to Local Storage, ~5-10 MB.
• Accessibility: Client-side only.

Example:

// Store data
sessionStorage.setItem('token', 'abc123');

// Retrieve data
const token = sessionStorage.getItem('token');
console.log(token); // abc123

// Remove data
sessionStorage.removeItem('token');

// Clear all session storage
sessionStorage.clear();

// Store data
sessionStorage.setItem('token', 'abc123');

// Retrieve data
const token = sessionStorage.getItem('token');
console.log(token); // abc123

// Remove data
sessionStorage.removeItem('token');

// Clear all session storage
sessionStorage.clear();

3. Cookies

• Purpose: Store small amounts of data that can be sent to the server with HTTP requests.
• Lifespan: Can be session-based (deleted when browser closes) or persistent (expires at a specific date).
• Storage Limit: ~4 KB per cookie.
• Accessibility: Accessible on client-side (document.cookie) and server-side.

Example:

// Set a cookie
document.cookie = "username=Alice; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// Read cookies
console.log(document.cookie); // "username=Alice"

// Delete cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

// Set a cookie
document.cookie = "username=Alice; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// Read cookies
console.log(document.cookie); // "username=Alice"

// Delete cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Quick Comparison