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"

Javascript in 100 bits

Course by zooboole,

Last Updated on 2025-01-28 08:04:00