How to Read Cookies Using JavaScript

What Are Cookies and How to Create Them?

Cookies are small data snippets stored in your browser by websites. They’re commonly used to:

• Remember your login sessions
• Track browsing activity
• Store preferences like dark mode or language settings

Each cookie is made up of a name-value pair and is accessible via JavaScript unless it’s marked as HttpOnly.

To create a cookie, you can use the document.cookie property.

Here’s a simple example:

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

This creates the cookie by setting the cookie name (username), value (JohnDoe), expiration date, and path.

How to Read a Cookie in JavaScript?

JavaScript makes it fairly simple to read cookies. Here’s how you can do it using the document.cookie property:

console.log(document.cookie);

This returns a single string containing all the cookies for the current page, separated by semicolons:

"user=JohnDoe; theme=light; sessionToken=abc123”

Then, you extract a specific cookie value with the getCookieValue() function:

function getCookieValue(cookieName) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    let [name, value] = cookie.trim().split('=');
    if (name === cookieName) return value;
  }
  return null;
}

In this case, you are reading the cookie named theme:

let theme = getCookieValue('theme');
console.log(theme); // Outputs: light

So:

• For Creating a Cookie: Use the document.cookie = “cookieData”.
• For Reading a Cookie: Use document.cookie to get all cookies, and extract specific ones using functions like getCookieValue().

Best Practices When Reading Cookies

Below are some of the best practices that you must follow if you are reading cookies in JavaScript.

• Use encodeURIComponent and decodeURIComponent: Always encode values before setting cookies and decode them when reading to handle special characters safely and avoid data corruption.
• Avoid storing sensitive data in cookies: Never store sensitive information like passwords in cookies unless they are securely encrypted to protect against theft.
• Update or delete cookies properly: Regularly update or delete cookies, especially session-related ones, to ensure secure and efficient session management.

Conclusion

Reading cookies with JavaScript is a simple yet powerful technique, especially when debugging or testing session data. Whether you’re building a login system, tracking user behavior, or validating browser storage, knowing how to read cookies is crucial for effective web development. This understanding ensures cookies are managed properly across different browsers and environments, maintaining a seamless user experience.