Describe the difference between a cookie, sessionStorage and localStorage in browsers

The Core Idea

Browsers provide several ways to store data on the client side. The three most common are:

• Cookies – small pieces of data sent to and from the server.
• localStorage – stores data persistently in the browser.
• sessionStorage – stores data temporarily for one browser tab session.

Cookies

• Can be read by both the browser and the server.
• Often used for authentication tokens or session IDs.
• Sent automatically with requests to matching domains.

document.cookie = 'theme=dark; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/';

localStorage

• Stores data persistently — it remains even after closing the browser.
• Only accessible through JavaScript (never sent to the server).

localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // 'dark'

sessionStorage

• Works just like localStorage but is limited to one tab.
• The data disappears when the tab is closed.

sessionStorage.setItem('tab', 'checkout');
console.log(sessionStorage.getItem('tab')); // 'checkout'

Security Notes

• Never store sensitive data (like passwords or tokens) in localStorage or sessionStorage — they are easily accessible by JavaScript.
• For secure cookies, use the HttpOnly and Secure flags so they can’t be accessed via JavaScript and are only sent over HTTPS.

Practical scenario
You need to persist a theme preference and an auth flag, deciding between cookies and Web Storage based on security and lifetime.

Common pitfalls

• Storing sensitive tokens in localStorage (XSS risk).
• Forgetting cookies are sent with every request.
• Assuming sessionStorage persists across tabs.