Understanding Cookies, Sessions, Local Storage & Session Storage: A Frontend Guide

1. Cookie

HTTP is stateless, so cookies are used to maintain state. The server sends a Set‑Cookie header, the browser stores it locally, and includes it in subsequent requests to the same server.

Typical cookie attributes:

user=Alice : stored key‑value pair

Expires : expiration time (session ends if not set)

HttpOnly : accessible only via HTTP, not JavaScript, prevents XSS

Secure : sent only over HTTPS, prevents eavesdropping

SameSite=Strict : mitigates CSRF attacks

Cookies can record user information, preserve login state, and enable cross‑page or cross‑site tracking, but they increase request size, are sent in clear text, have limited size (~4 KB), and are limited in number per domain.

2. Session

A session is created on the server and identified by a SessionId, which is usually stored in a cookie. The client sends the SessionId with each request, allowing the server to retrieve the associated session data.

Sessions store data on the server, so they can hold larger or more sensitive information (e.g., authentication status, permissions, shopping‑cart contents). They are more secure than cookies but consume server resources, are harder to scale in distributed environments, and do not work across different domains.

3. Local Storage

HTML5 introduced Local Storage to overcome cookie size limits and reduce network traffic. Each origin gets up to about 5 MB of persistent key‑value storage that remains after the browser is closed. Data is accessed via JavaScript APIs and is not sent with HTTP requests.

Local Storage is subject to the same‑origin policy, meaning a site can only read its own stored data.

4. Session Storage

Session Storage, also part of the Web Storage API, stores data only for the lifetime of a single tab or window. The storage is cleared when the tab or window is closed. Each origin typically gets around 5 MB.

Summary

Cookies and Web Storage APIs (Local Storage, Session Storage) reside on the client side, while sessions reside on the server side. Cookies are small (≈4 KB) and sent with every request, suitable for shared client‑server data. Local Storage provides permanent, larger (≈5 MB) client‑side storage without server interaction. Session Storage offers temporary, same‑tab storage that disappears on close. Server‑side sessions are best for authentication, shopping carts, user preferences, and game state, but require careful security handling (XSS, CSRF).