Cookie Fundamentals

What Are Cookies?

Cookies are small pieces of data stored in a user's web browser. They were originally designed to maintain state in stateless HTTP protocol, allowing websites to remember information about users between page visits.

Basic Concepts

Purpose

State Management: Remember user preferences, login status, shopping cart contents
Personalization: Customize content based on user behavior
Tracking: Track user behavior across pages and sessions
Authentication: Maintain user login sessions

How Cookies Work

Server Sets Cookie: When a browser requests a page, the server can send a Set-Cookie header
Browser Stores Cookie: The browser stores the cookie according to its attributes
Browser Sends Cookie: On subsequent requests to the same domain, the browser sends the cookie in a Cookie header
Server Receives Cookie: The server can read and use the cookie value

A cookie consists of:

Name: The cookie identifier (e.g., session_id)
Value: The actual data (e.g., abc123xyz)
Attributes: Metadata that controls cookie behavior (Domain, Path, Expires, etc.)

Example

Set-Cookie: session_id=abc123xyz; Domain=example.com; Path=/; Secure; HttpOnly

This sets a cookie named session_id with value abc123xyz that:

Is valid for example.com and its subdomains
Is available for all paths under /
Can only be sent over HTTPS (Secure)
Cannot be accessed via JavaScript (HttpOnly)

Creation: Server sends Set-Cookie header
Storage: Browser stores cookie based on attributes
Transmission: Browser sends cookie in Cookie header on matching requests
Expiration: Cookie expires based on Expires or Max-Age attribute
Deletion: Browser removes expired cookies or cookies with past expiration date

sequenceDiagram participant Browser participant Server participant CookieStorage Browser->>Server: GET /page HTTP/1.1 Server->>Browser: HTTP/1.1 200 OK
Set-Cookie: session=abc123
Domain=example.com
Path=/
Secure
HttpOnly
SameSite=Strict
Max-Age=3600 Browser->>CookieStorage: Store cookie (based on attributes) CookieStorage-->>Browser: Cookie stored Note over Browser,CookieStorage: Cookie stored with Domain=example.com, Path=/, Max-Age=3600 Browser->>Server: GET /dashboard HTTP/1.1
Cookie: session=abc123 Server->>Browser: HTTP/1.1 200 OK
Content: Dashboard HTML Note over Browser: After 1 hour (Max-Age expired) CookieStorage->>CookieStorage: Remove expired cookie

Key Terminology

Session Cookie: Cookie that expires when browser closes (no Expires or Max-Age)
Persistent Cookie: Cookie with an expiration date
First-Party Cookie: Cookie set by the domain the user is visiting
Third-Party Cookie: Cookie set by a domain different from the one the user is visiting
Same-Site Cookie: Cookie that is only sent with requests from the same site
Cross-Site Cookie: Cookie sent with requests from different sites

Next Steps

Learn about Cookie Attributes to understand how to control cookie behavior
Start experimenting in the Playground