Javascript in 100 bits

Course by zooboole,

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

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"