Cookies vs localStorage vs sessionStorage: The Complete Guide for Frontend Developers

In modern frontend development, storing data in the browser is a common task. Whether it's authentication tokens, theme preferences or temporary state, you’ve likely encountered cookies, localStorage or sessionStorage. But when should you use which one?

This blog breaks down the differences, use cases and security concerns - helping you choose the right storage strategy for your web app.

---

📦 What Are They?

🍪 Cookies

• Key-value pairs stored by the browser.

• Can be sent automatically with every HTTP request to the server.

• Size limit: ~4KB per cookie.

• Expiry can be set.

🗃️ localStorage

• Stores data in key-value pairs in the browser.

• Persistent - stays even after the browser is closed.

• Size limit: ~5MB.

• Only accessible via JavaScript (not sent with requests).

🕓 sessionStorage

• Similar to localStorage but scoped to the browser tab.

• Cleared when the tab is closed.

• Size limit: ~5MB.

• Also only accessible via JavaScript.

---

⚖️ Key Differences

---

🧠 When to Use What

Use Cookies When:

• You need to send data to the server with each HTTP request (e.g. session IDs).

• You're handling authentication in a secure, HttpOnly way.

• You need data accessible on both client and server.

Use localStorage When:

• You want to persist data across sessions (e.g. theme preferences, language settings).

• You don’t need the data to be shared with the server.

Use sessionStorage When:

• You need temporary data during a single session (e.g. form state during checkout).

• You want data to be cleared once the tab is closed.

---

🔐 Security Considerations

• Cookies can be made secure by setting the HttpOnly, Secure and SameSite flags — good for storing tokens but must be used carefully.

• localStorage and sessionStorage are vulnerable to XSS attacks if your site isn’t properly sanitized.

• Never store sensitive info (e.g. passwords, raw JWTs) in localStorage/sessionStorage.

---

🛠️ Real World Examples

✅ Good:

• Store a dark mode toggle in localStorage

• Use a sessionStorage key to prevent duplicate form submissions on page refresh

• Store a CSRF token in a secure cookie for server-side validation

❌ Bad:

• Storing access tokens in localStorage without proper XSS protection

• Using sessionStorage for login sessions that need to persist on reload

🧭 Final Thoughts

Choosing the right storage method can make your app more secure, performant and user-friendly. Start by asking: Does this data need to persist? Should it be shared across tabs or sent to the server? From there, the right choice becomes clear.

Use cookies for communication with the server. Use localStorage for long-term client-only data. Use sessionStorage for short-lived, tab-specific state.

---