APIs & Browser

Cookies

Working with browser cookies for data persistence

Find videos you like?

Save to resource drawer for future reference!

What are Cookies?

Small pieces of data stored in the browser

Cookies are small text files stored by the browser that can hold data up to 4KB per cookie. They are automatically sent with every HTTP request to the same domain, making them useful for authentication, tracking, and storing user preferences.

Sent with Requests

Automatically included in HTTP requests to the server

Expiration Date

Can be set to expire at a specific time or when browser closes

Domain & Path

Can be scoped to specific domains and URL paths

Cookie Attributes

Important properties that control cookie behavior

Attribute	Description	Example
`name=value`	Cookie name and value (required)	`username=john`
`expires`	Expiration date (UTC format)	`expires=Wed, 31 Dec 2025`
`max-age`	Lifetime in seconds	`max-age=3600`
`domain`	Domain that can access cookie	`domain=example.com`
`path`	URL path where cookie is valid	`path=/admin`
`secure`	Only sent over HTTPS	`secure`
`httpOnly`	Not accessible via JavaScript	`httpOnly`
`sameSite`	CSRF protection (Strict, Lax, None)	`sameSite=Strict`

Security Note

Always use secure, httpOnly, and sameSite attributes for sensitive cookies to prevent XSS and CSRF attacks.

Basic Cookie Operations

Creating, reading, and deleting cookies

Cookie Helper Functions

Essential functions for cookie manipulation

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Practical Example: Cookie Manager Class

Professional cookie management with security features

Complete Cookie Manager

Production-ready cookie handling with security options

javascript

code

DarkEditable

class CookieManager {
  // Set a cookie with options
  static set(name, value, options = {}) {
    let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    
    // Set expiration
    if (options.days) {
      const date = new Date();
      date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000));
      cookieString += `; expires=${date.toUTCString()}`;
    }
    
    // Set path (default to root)
    cookieString += `; path=${options.path || '/'}`;
    
    // Set domain if specified
    if (options.domain) {
      cookieString += `; domain=${options.domain}`;
    }
    
    // Security flags
    if (options.secure) {
      cookieString += '; secure';
    }
    
    if (options.sameSite) {
      cookieString += `; sameSite=${options.sameSite}`;
    }
    
    document.cookie = cookieString;
  }
  
  // Get a cookie value
  static get(name) {
    const nameEQ = encodeURIComponent(name) + "=";
    const cookies = document.cookie.split(';');
    
    for (let cookie of cookies) {
      cookie = cookie.trim();
      if (cookie.indexOf(nameEQ) === 0) {
        return decodeURIComponent(
          cookie.substring(nameEQ.length)
        );
      }
    }
    return null;
  }
  
  // Delete a cookie
  static remove(name, options = {}) {
    this.set(name, '', {
      ...options,
      days: -1
    });
  }
  
  // Check if cookie exists
  static has(name) {
    return this.get(name) !== null;
  }
  
  // Get all cookies as object
  static getAll() {
    const cookies = {};
    document.cookie.split(';').forEach(cookie => {
      const [name, value] = cookie.trim().split('=');
      if (name) {
        cookies[decodeURIComponent(name)] = decodeURIComponent(value);
      }
    });
    return cookies;
  }
}

// Usage examples
// Set with security options
CookieManager.set('session', 'abc123', {
  days: 7,
  secure: true,
  sameSite: 'Strict'
});

// Get cookie value
const sessionId = CookieManager.get('session');

// Check if exists
if (CookieManager.has('session')) {
  console.log('User is logged in');
}

// Get all cookies
const allCookies = CookieManager.getAll();

// Remove cookie
CookieManager.remove('session');

Console Output

Click "Run Code" to see output here...

Cookies vs localStorage vs sessionStorage

Choose the right storage mechanism

Feature	Cookies	localStorage	sessionStorage
Capacity	~4KB	~5-10MB	~5-10MB
Sent to Server	Yes (automatic)	No	No
Expiration	Configurable	Never (manual)	Tab close
Scope	Domain/path	Origin	Tab/window
Best For	Auth tokens, tracking	User preferences	Form data, temp state

Best Practices & Security

Do's

• Use secure and sameSite attributes
• Set httpOnly for sensitive cookies (server-side)
• Use short expiration times for sensitive data
• Encode/decode cookie values properly
• Keep cookie size small (under 4KB)
• Use path and domain restrictions

Don'ts

• Don't store sensitive data in plain text
• Don't create too many cookies (20-50 max)
• Don't exceed 4KB per cookie
• Don't rely on cookies for critical security
• Don't forget to URL-encode special characters
• Don't use cookies for large data storage

Key Takeaways

Server Communication

Automatically sent with every HTTP request

Limited Size

Maximum 4KB per cookie

Security Attributes

Use secure, httpOnly, and sameSite flags

Configurable Expiration

Set custom expiration dates

Previous Topic

localStorage & sessionStorage

Client-side data storage with Web Storage API.

Next Topic

IndexedDB

Client-side database for large-scale data storage.

Ask a Question

Have a question about Cookies? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

APIs & Browser

Cookies

Working with browser cookies for data persistence

Find videos you like?

Save to resource drawer for future reference!

What are Cookies?

Small pieces of data stored in the browser

Sent with Requests

Automatically included in HTTP requests to the server

Expiration Date

Can be set to expire at a specific time or when browser closes

Domain & Path

Can be scoped to specific domains and URL paths

Cookie Attributes

Important properties that control cookie behavior

Attribute	Description	Example
`name=value`	Cookie name and value (required)	`username=john`
`expires`	Expiration date (UTC format)	`expires=Wed, 31 Dec 2025`
`max-age`	Lifetime in seconds	`max-age=3600`
`domain`	Domain that can access cookie	`domain=example.com`
`path`	URL path where cookie is valid	`path=/admin`
`secure`	Only sent over HTTPS	`secure`
`httpOnly`	Not accessible via JavaScript	`httpOnly`
`sameSite`	CSRF protection (Strict, Lax, None)	`sameSite=Strict`

Security Note

Always use secure, httpOnly, and sameSite attributes for sensitive cookies to prevent XSS and CSRF attacks.

Basic Cookie Operations

Creating, reading, and deleting cookies

Cookie Helper Functions

Essential functions for cookie manipulation

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Practical Example: Cookie Manager Class

Professional cookie management with security features

Complete Cookie Manager

Production-ready cookie handling with security options

javascript

code

DarkEditable

// Usage examples
// Set with security options
CookieManager.set('session', 'abc123', {
  days: 7,
  secure: true,
  sameSite: 'Strict'
});

// Get cookie value
const sessionId = CookieManager.get('session');

// Check if exists
if (CookieManager.has('session')) {
  console.log('User is logged in');
}

// Get all cookies
const allCookies = CookieManager.getAll();

// Remove cookie
CookieManager.remove('session');

Console Output

Click "Run Code" to see output here...

Cookies vs localStorage vs sessionStorage

Choose the right storage mechanism

Feature	Cookies	localStorage	sessionStorage
Capacity	~4KB	~5-10MB	~5-10MB
Sent to Server	Yes (automatic)	No	No
Expiration	Configurable	Never (manual)	Tab close
Scope	Domain/path	Origin	Tab/window
Best For	Auth tokens, tracking	User preferences	Form data, temp state

Best Practices & Security

Do's

• Use secure and sameSite attributes
• Set httpOnly for sensitive cookies (server-side)
• Use short expiration times for sensitive data
• Encode/decode cookie values properly
• Keep cookie size small (under 4KB)
• Use path and domain restrictions

Don'ts

• Don't store sensitive data in plain text
• Don't create too many cookies (20-50 max)
• Don't exceed 4KB per cookie
• Don't rely on cookies for critical security
• Don't forget to URL-encode special characters
• Don't use cookies for large data storage

Key Takeaways

Server Communication

Automatically sent with every HTTP request

Limited Size

Maximum 4KB per cookie

Security Attributes

Use secure, httpOnly, and sameSite flags

Configurable Expiration

Set custom expiration dates

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

localStorage & sessionStorage

IndexedDB

JavaScript Code Editor

Building Your Learning Module...

Cookies

Sent with Requests

Expiration Date

Domain & Path

Security Note

Cookie Helper Functions

Complete Cookie Manager

Do's

Don'ts

Key Takeaways

Server Communication

Limited Size

Security Attributes

Configurable Expiration

localStorage & sessionStorage

IndexedDB

JavaScript Code Editor

Cookies

Sent with Requests

Expiration Date

Domain & Path

Security Note

Cookie Helper Functions

Complete Cookie Manager

Do's

Don'ts

Key Takeaways

Server Communication

Limited Size

Security Attributes

Configurable Expiration