Introduction to Browser Storage

Modern web applications need to store small amounts of data on the client side to:

• Remember user preferences

• Maintain login sessions

• Track user behavior

• Improve user experience

One of the oldest and most widely used browser storage mechanisms is Cookies.

Cookies – Basic Understanding

What Are Cookies ?

A cookie is a small piece of data stored in the user’s browser, created by a website, and sent back to the server with every request.

Simple Definition

Cookies are small text files stored in the browser that help websites remember information about the user.

Real-Life Example

Imagine visiting a website and seeing:

“Welcome back, Rahul!”

This happens because:

• The website stored your name or session info in a cookie

• The browser sends that cookie on your next visit

Why Cookies Are Needed

Cookies are used to:

• Maintain login sessions

• Remember user preferences

• Track user activity

• Store shopping cart data

• Enable personalization

Without cookies:

• Users would need to log in on every page

• Shopping carts would reset on refresh

• Preferences would be lost

How Cookies Work (Step-by-Step)

1. User visits a website

2. Server sends a cookie to the browser

3. Browser stores the cookie

4. On next request, browser sends the cookie back

5. Server reads cookie and identifies the user

This happens automatically.

Basic Structure of a Cookie

A cookie consists of:

• Name

• Value

• Expiry date

• Path

• Domain

• Security flags

Example:

username=Rahul; expires=Fri, 31 Dec 2026 23:59:59 GMT; path=/

Types of Cookies (Basic Level)

1. Session Cookies

• Temporary cookies

• Deleted when browser is closed

• Used for login sessions

Example use:

• User logged in until browser is closed

2. Persistent Cookies

• Stored for a specific time

• Remain after browser is closed

• Used for remembering preferences

Example use:

• “Remember me” option

3. First-Party Cookies

• Created by the website you are visiting

• Used for personalization and sessions

4. Third-Party Cookies

• Created by external services

• Used for tracking and ads

• Common in analytics and marketing

Creating Cookies Using JavaScript

JavaScript allows us to create cookies using document.cookie.

Example: Create a Cookie

document.cookie = "username=Rahul";

This creates a simple cookie.

Create Cookie with Expiry Date

document.cookie = "theme=dark; expires=Fri, 31 Dec 2026 23:59:59 GMT";

This cookie will remain until the expiry date.

Reading Cookies in JavaScript

console.log(document.cookie);

Output:

username=Rahul; theme=dark

Cookies are returned as a single string.

Updating a Cookie

Cookies are updated by recreating them with the same name.

document.cookie = "username=Amit";

The old value is replaced.

Deleting a Cookie

To delete a cookie:

• Set its expiry date to a past date

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Cookie Size Limitation

Cookies have strict limits:

• Maximum size: ~4KB per cookie

• Limited number per domain

Because of this, cookies should store small data only.

When NOT to Use Cookies

Avoid cookies for:

• Large data storage

• Sensitive information (passwords)

• Complex data structures

Security Considerations (Basic)

Cookies can be vulnerable if not handled properly.

Common risks:

• Cookie theft

• Session hijacking

• Cross-site scripting (XSS)

Basic safety practices:

• Do not store passwords

• Use secure flags (covered later)

• Use HTTPS websites

Cookies vs Other Browser Storage

(Covered in detail in later lessons)

Common Mistakes

• Storing too much data in cookies

• Forgetting expiry date

• Expecting cookies to be secure by default

• Confusing cookies with localStorage

Best Practices for Cookies

• Store minimal data

• Set expiry explicitly

• Use cookies mainly for sessions

• Avoid sensitive data

• Clean unused cookies