Lesson 55 - Comparing localStorage, sessionStorage, and Cookies
Web storage allows us to store data in the browser, but different storage methods have different behaviors. In this lesson, we’ll compare localStorage, sessionStorage, and cookies to understand when to use each.
Comparison Table
Feature | localStorage | sessionStorage | Cookies |
---|---|---|---|
Storage Limit | ~5MB | ~5MB | ~4KB |
Expiration | Never (until manually cleared) | Clears when the tab is closed | Can have an expiration date |
Access Scope | Per domain (persists across sessions) | Per tab (only available while tab is open) | Sent with every HTTP request |
Data Type | Strings (must manually convert objects) | Strings (must manually convert objects) | Strings |
Performance | Fast (only accessible via JavaScript) | Fast (only accessible via JavaScript) | Slower (sent with every request) |
Security | Accessible by JavaScript (vulnerable to XSS) | Accessible by JavaScript (vulnerable to XSS) | More secure with HttpOnly and Secure flags |
When to Use What?
- Use
localStorage
for storing long-term data like user preferences. - Use
sessionStorage
for temporary session-specific data like form inputs. - Use
cookies
when you need to send small pieces of data (like authentication tokens) with every request.
Code Examples
localStorage Example:
localStorage.setItem("user", "John Doe");
console.log(localStorage.getItem("user")); // "John Doe"
sessionStorage Example:
sessionStorage.setItem("sessionKey", "Active");
console.log(sessionStorage.getItem("sessionKey")); // "Active"
Cookies Example:
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2025 12:00:00 UTC; path=/";
console.log(document.cookie); // "username=John Doe"