How to manipulate Cookies in JavaScript? Please provide code examples for setting, reading, and deleting Cookies. - 面试题

In JavaScript, Cookie operations are mainly implemented through the document.cookie property, which is a string containing all Cookies.

Reading Cookies

javascript
// Get all Cookies
const allCookies = document.cookie;

// Parse specific Cookie
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    const [key, value] = cookie.trim().split('=');
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return null;
}

Setting Cookies

javascript
function setCookie(name, value, options = {}) {
  let cookieString = `${name}=${encodeURIComponent(value)}`;
  
  if (options.expires) {
    cookieString += `; Expires=${options.expires.toUTCString()}`;
  }
  
  if (options.maxAge) {
    cookieString += `; Max-Age=${options.maxAge}`;
  }
  
  if (options.path) {
    cookieString += `; Path=${options.path}`;
  }
  
  if (options.domain) {
    cookieString += `; Domain=${options.domain}`;
  }
  
  if (options.secure) {
    cookieString += '; Secure';
  }
  
  if (options.httpOnly) {
    // HttpOnly cannot be set via JavaScript
    console.warn('HttpOnly cannot be set via JavaScript');
  }
  
  if (options.sameSite) {
    cookieString += `; SameSite=${options.sameSite}`;
  }
  
  document.cookie = cookieString;
}

Usage examples

javascript
// Set session Cookie
setCookie('username', 'john');

// Set persistent Cookie (7 days)
const expires = new Date();
expires.setDate(expires.getDate() + 7);
setCookie('userId', '123', { expires, path: '/' });

// Set secure Cookie
setCookie('token', 'abc123', {
  secure: true,
  sameSite: 'Strict'
});

// Read Cookie
const username = getCookie('username');

Deleting Cookies

javascript
function deleteCookie(name, path = '/') {
  document.cookie = `${name}=; Expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=${path}`;
}

Important notes

Cookie values need to be encoded (encodeURIComponent)
HttpOnly Cookies cannot be manipulated via JavaScript
Only one Cookie can be set at a time
Cookie size limit is about 4KB