sessionStorage vs localStorage vs cookies

JavaScript

The short answer

All three are ways to store data in the browser, but they differ in how long the data lasts, how much you can store, and whether the data is sent to the server. localStorage persists until you manually clear it. sessionStorage lasts only until the tab is closed. Cookies are sent with every HTTP request and can have an expiration date.

localStorage

Data in localStorage stays forever (or until the user clears their browser data or your code deletes it). It is scoped to the origin (same protocol, domain, and port).

// Save data
localStorage.setItem('theme', 'dark');
// Read data
const theme = localStorage.getItem('theme'); // "dark"
// Remove one item
localStorage.removeItem('theme');
// Clear everything
localStorage.clear();
  • Storage limit: About 5-10 MB (varies by browser)
  • Sent to server: No — stays in the browser only
  • Persistence: Until manually deleted
  • Scope: Shared across all tabs and windows of the same origin

sessionStorage

Works exactly like localStorage, but the data is cleared when the tab (or browser window) is closed.

sessionStorage.setItem('cartId', 'abc123');
const cartId = sessionStorage.getItem('cartId');
  • Storage limit: About 5-10 MB
  • Sent to server: No
  • Persistence: Until the tab is closed
  • Scope: Only accessible in the tab that created it — not shared across tabs

Cookies

Cookies are small pieces of data that are sent to the server with every HTTP request. They were the original way to store data in the browser.

// Set a cookie
document.cookie = 'theme=dark; max-age=86400; path=/';
// Read cookies (returns all cookies as one string)
console.log(document.cookie); // "theme=dark; other=value"
  • Storage limit: About 4 KB per cookie
  • Sent to server: Yes — with every HTTP request to the same domain
  • Persistence: Until the expiration date (or session end if no expiration is set)
  • Scope: Shared across tabs, can be scoped by path and domain

Cookies have attributes that localStorage and sessionStorage do not:

  • max-age or expires — how long the cookie lasts
  • path — which URL paths can access the cookie
  • domain — which subdomains can access the cookie
  • secure — only sent over HTTPS
  • httpOnly — cannot be accessed by JavaScript (set by the server)
  • SameSite — controls cross-site request behavior (CSRF protection)

When to use which

Use CaseBest Option
User preferences (theme, language)localStorage
Shopping cart for current sessionsessionStorage
Authentication tokensCookies (httpOnly, secure)
Form data that should not persistsessionStorage
Data needed by the serverCookies
Large amounts of client-only datalocalStorage

Important security notes

Never store sensitive data in localStorage or sessionStorage. They are accessible to any JavaScript on the page. If your site has an XSS vulnerability, an attacker can read everything.

Authentication tokens should use httpOnly cookies. An httpOnly cookie cannot be accessed by JavaScript, which means XSS attacks cannot steal it. This is the most secure option for auth tokens.

Common Pitfalls

A common mistake is storing JWT tokens in localStorage. While it works, it means any script on your page (including malicious scripts from XSS attacks) can read the token. The recommended approach for auth tokens is httpOnly cookies, which are invisible to JavaScript.

Interview Tip

When answering this question, organize your answer around the key differences: persistence, storage size, server access, and scope. Then give a practical use case for each. If the interviewer asks about security, knowing about httpOnly cookies and XSS implications will impress them.

Why interviewers ask this

This is a very common interview question because it tests fundamental web knowledge. Interviewers want to see if you know the practical differences, can choose the right storage method for a given use case, and understand the security implications — especially around authentication tokens.

Table of Contents