Cookies

What are Cookies?

Cookies are small text files stored in your browser by websites. They remember information about you - login status, preferences, shopping cart items - so the website recognizes you on your next visit.

Think of cookies like a loyalty card. The store gives you a card with your ID. Next time you visit, they scan your card and know who you are and what you like.

How Cookies Work

1. You visit a website
2. Server sends a cookie to your browser
3. Browser stores the cookie
4. On future requests, browser sends the cookie back
5. Server reads the cookie and knows who you are

All automatic. Happens in milliseconds.

What Cookies Look Like

Simple key-value pairs with some settings like expiration dates and security flags.

Common Uses for Cookies

Authentication: Remember you are logged in

Shopping Cart: Keep items in cart between pages

Preferences: Remember dark mode, language, timezone

Analytics: Track which pages you visit

Ads: Target ads based on browsing history

Setting Cookies

Server-Side (Node.js): Use response methods to set cookies with options like maxAge, httpOnly, and secure flags.

Client-Side (JavaScript): Use document.cookie to set cookies directly in the browser.

Reading Cookies

Server-Side: Access cookies from the request object.

Client-Side: Read from document.cookie property.

Cookie Attributes

expires / max-age: When cookie expires

domain: Which domain can read the cookie

path: Which URLs can access the cookie

secure: Only send over HTTPS

httpOnly: JavaScript cannot access (prevents XSS attacks)

SameSite: Control cross-site cookie behavior

Session Cookies vs Persistent Cookies

Session Cookies: Deleted when browser closes - no expiration set.

Persistent Cookies: Stored for specified time - expiration date set explicitly.

Security Concerns

XSS Attacks: Malicious scripts steal cookies

• Solution: Use httpOnly flag

CSRF Attacks: Trick browser into sending cookies to wrong site

• Solution: Use SameSite attribute

Cookie Theft: Attacker intercepts cookies

• Solution: Use secure flag (HTTPS only)

Cookie Consent

GDPR and other laws require cookie consent for tracking. You have seen cookie banners on every website. Required by law in EU and many other regions.

Cookies vs localStorage

Cookies:

• Sent with every request
• 4KB size limit
• Can be httpOnly (secure)
• Have expiration

localStorage:

• Not sent with requests
• 5-10MB size limit
• Accessible by JavaScript
• No expiration (persist forever)

Use cookies for authentication. Use localStorage for larger client-side data.

Third-Party Cookies

First-Party: Set by the site you visit

Third-Party: Set by other domains (ads, analytics)

Browsers increasingly block third-party cookies for privacy.

Working with Cookies

JavaScript libraries like js-cookie make working with cookies much simpler than parsing document.cookie manually.

The Bottom Line

Cookies are essential for web authentication and user experience. They remember who you are across page loads and visits.

Understand cookies, use them securely, and respect user privacy. Every web developer works with cookies constantly.