How to Access Cookies in JavaScript

Cookies are small pieces of data stored by the browser that can be accessed by websites. They are commonly used to remember user preferences, login sessions, and other information. In this article, we will explore how to access, create, and delete cookies using JavaScript.

Reading Cookies

To read a cookie in JavaScript, you can use the document.cookie property. This property returns a string containing all cookies separated by semicolons.

// Reading all cookies
const allCookies = document.cookie;
console.log('All Cookies:', allCookies);

// Reading a specific cookie
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    cookie = cookie.trim();
    if (cookie.startsWith(name + '=')) {
      return cookie.substring(name.length + 1);
    }
  }
  return null;
}

const userCookie = getCookie('username');
console.log('Username Cookie:', userCookie);

Writing Cookies

To create a new cookie, you set the document.cookie property with the desired values. You can also specify additional attributes like expires, path, and sameSite.

// Creating a simple cookie
function setCookie(name, value, days) {
  const expires = days ? `expires=${new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString()}` : '';
  document.cookie = `${name}=${value};${expires};path=/`;
}

// Setting a cookie that expires after 7 days
setCookie('username', 'JohnDoe', 7);

Deleting Cookies

Deleting a cookie involves setting its expiration date to a time in the past. This tells the browser to remove the cookie.

// Deleting a cookie
function deleteCookie(name) {
  document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/`;
}

// Delete the username cookie
deleteCookie('username');

Common Use Cases

User Authentication: Store a session token to keep users logged in.
Preferences: Remember user settings like theme or language.
Shopping Cart: Keep track of items added to the cart.
Analytics: Track user behavior for statistical purposes.

Best Practices

Security: Always mark cookies as HttpOnly and Secure to protect against XSS attacks.
Size Limitation: Keep cookies small (under 4KB) to avoid performance issues.
Expiration: Set a reasonable expiration time to avoid cluttering the user’s storage.
Privacy: Be transparent about what data you’re storing and why.

Frequently Asked Questions

Q: Can I access cookies from different websites?
A: No, cookies are domain-specific and cannot be accessed across different websites for security reasons.

Q: What happens if a cookie expires?
A: The browser automatically deletes the cookie when it expires.

Q: How do I handle cookies in different browsers?
A: Most modern browsers support cookies, but there might be slight differences in handling certain attributes. Testing across browsers is recommended.

By following these guidelines, you can effectively use cookies in your web applications to enhance user experience and functionality.