About Cookies vs localStorage vs sessionStorage

Lifetime, security, cross-tab, cookie attributes, anti-patterns. Part of the DevTools Surf developer suite. Browse more tools in the Info / Guides collection.

Use Cases

• Frontend developers choosing between cookies and localStorage for auth tokens
• Security engineers auditing cookie attributes for CSRF protection
• Mobile web devs understanding sessionStorage behavior across tabs
• Full-stack devs implementing remember-me functionality with proper cookie flags

Tips

• Use the comparison table to pick the right storage for your use case
• Check the cookie attributes section for SameSite and Secure flags
• Review the anti-patterns list to avoid storing sensitive data in localStorage

Fun Facts

• HTTP cookies were invented by Lou Montulli at Netscape in 1994 to solve the shopping cart problem — HTTP had no way to remember state between requests.
• The localStorage API was standardized in HTML5 (2009) with a 5 MB limit per origin — roughly 2.5 million characters of UTF-16 text.
• The SameSite cookie attribute, first implemented by Chrome in 2016, became 'Lax' by default in Chrome 80 (February 2020) to mitigate CSRF attacks.

FAQ

Cookie, localStorage, sessionStorage — key differences?

Cookies sent with every request (server-visible); localStorage/sessionStorage client-only. Cookies have expiry; local is permanent until cleared; session clears on tab close.

Which should I use for auth tokens?

httpOnly + Secure cookies for session tokens (protected from JS). localStorage is vulnerable to XSS. If you must use localStorage, treat every token as compromise-possible.

What about SameSite?

Strict (no cross-site), Lax (cross-site for top-level navigation only), None (cross-site allowed, requires Secure). Lax is the safe default for most cookies.

Size limits?

Cookies: 4KB per cookie, ~50 per domain. localStorage: ~5MB per origin. sessionStorage: same as localStorage. For bigger client-side data use IndexedDB.