๐Ÿช JavaScript Cookies

Complete interactive guide to cookie creation, reading, updating, and deletion

1. Cookie Operations

Cookie Operations Output
[Ready] ๐Ÿ‘ˆ Click any cookie operation to see results here

4. Complete Cookie Functions

// Complete Cookie Management Library

// 1. SET COOKIE FUNCTION
function setCookie(name, value, days = 7, path = '/', secure = false, sameSite = 'Strict') {
  let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;

  // Add expiration
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    cookieString += `; expires=${date.toUTCString()}`;
  }

  // Add path
  cookieString += `; path=${path}`;

  // Add secure flag
  if (secure) {
    cookieString += '; secure';
  }

  // Add SameSite
  cookieString += `; samesite=${sameSite}`;

  // Set the cookie
  document.cookie = cookieString;
  return true;
}

// 2. GET COOKIE FUNCTION
function getCookie(name) {
  const nameEQ = encodeURIComponent(name) + '=';
  const cookies = document.cookie.split(';');

  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1);
    }

    if (cookie.indexOf(nameEQ) === 0) {
      return decodeURIComponent(cookie.substring(nameEQ.length));
    }
  }
  return null;
}

// 3. CHECK COOKIE FUNCTION
function checkCookie(name) {
  const value = getCookie(name);
  return value !== null && value !== undefined;
}

// 4. DELETE COOKIE FUNCTION
function deleteCookie(name, path = '/') {
  document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=${path}`;
  return true;
}

// 5. GET ALL COOKIES FUNCTION
function getAllCookies() {
  return document.cookie.split('; ').reduce((cookies, cookie) => {
    const [name, value] = cookie.split('=');
    if (name && value) {
      cookies[decodeURIComponent(name)] = decodeURIComponent(value);
    }
    return cookies;
  }, {});
}

8. Real-World Cookie Examples

// Real-World Cookie Implementations

// 1. USER PREFERENCES COOKIE
function saveUserPreferences(preferences) {
  const cookieValue = encodeURIComponent(JSON.stringify(preferences));
  document.cookie = `preferences=${cookieValue}; max-age=${30 * 24 * 60 * 60}; path=/; samesite=strict`;
}

function loadUserPreferences() {
  const cookieValue = getCookie('preferences');
  return cookieValue ? JSON.parse(decodeURIComponent(cookieValue)) : {};
}

// 2. SHOPPING CART COOKIE
class ShoppingCart {
  constructor() {
    this.items = this.loadCart();
  }

  addItem(productId, quantity = 1) {
    this.items[productId] = (this.items[productId] || 0) + quantity;
    this.saveCart();
  }

  saveCart() {
    const cartData = JSON.stringify(this.items);
    document.cookie = `cart=${encodeURIComponent(cartData)}; max-age=${7 * 24 * 60 * 60}; path=/`;
  }

  loadCart() {
    const cookieValue = getCookie('cart');
    return cookieValue ? JSON.parse(decodeURIComponent(cookieValue)) : {};
  }
}

// 3. SESSION MANAGEMENT
function createSession(userId) {
  const sessionToken = generateSecureToken();
  document.cookie = `session=${sessionToken}; secure; samesite=strict; path=/`;
  return sessionToken;
}

function validateSession() {
  const sessionToken = getCookie('session');
  return sessionToken !== null;
}