What is the difference between local storage vs cookies?

Local storage and cookies are two different ways to store data in web browsers, each with distinct characteristics and use cases. Understanding their differences helps you choose the right storage mechanism for your web application.

Storage Capacity

Local storage offers significantly more storage space than cookies:

• Local Storage: Typically 5-10 MB per domain
• Cookies: Limited to 4 KB per cookie, with a maximum of about 20 cookies per domain

Server Communication

The key difference lies in how they interact with servers:

// Local Storage - stays on client side
localStorage.setItem('username', 'john_doe');
console.log(localStorage.getItem('username')); // john_doe

// Cookies - sent with every HTTP request
document.cookie = "sessionId=abc123; path=/";
console.log(document.cookie); // sessionId=abc123

john_doe
sessionId=abc123

Local storage data never gets sent to the server automatically, while cookies are transmitted with every HTTP request to the same domain.

Data Persistence

// Local Storage - persists until manually cleared
localStorage.setItem('theme', 'dark');

// Cookie with expiration date
let expirationDate = new Date();
expirationDate.setTime(expirationDate.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
document.cookie = "preference=light; expires=" + expirationDate.toUTCString() + "; path=/";

// Check stored values
console.log('Theme:', localStorage.getItem('theme'));
console.log('All cookies:', document.cookie);

Theme: dark
All cookies: preference=light; sessionId=abc123

Clearing Data

// Clear specific local storage item
localStorage.removeItem('theme');

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

// Clear specific cookie (set expiration to past date)
document.cookie = "preference=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

console.log('Local storage after clear:', localStorage.getItem('theme')); // null
console.log('Cookies after clear:', document.cookie);

Local storage after clear: null
Cookies after clear: sessionId=abc123

Comparison Table

Common Use Cases

Local Storage is ideal for:

• User preferences and settings
• Offline application data
• Large datasets that don't need server access

Cookies are better for:

• Session management and authentication
• Server-side tracking and personalization
• Small pieces of data that expire

Conclusion

Use local storage for large, client-side data that doesn't need server access. Choose cookies for small data pieces that require server communication or automatic expiration. Local storage offers more space but cookies provide better server integration and security options.