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().

How Do AI Browser Agents Read Cookies During Automated Testing?

An AI browser agent reads cookies through the automation layer, not through document.cookie, so it can see cookies your own JavaScript in this article never could.

• Full cookie jar access: Playwright's context.cookies() and the Chrome DevTools Protocol return every cookie set on a page, including HttpOnly and Secure ones that document.cookie cannot expose to page scripts.
• Session reuse: an agent that logs in once can save that cookie jar to a file and call context.addCookies() on the next run, skipping the login form and any repeat verification step instead of re-authenticating on every single test.
• Model Context Protocol servers: an MCP browser server exposes these same cookie read and write calls as tools an LLM agent can invoke directly, so the agent decides when to capture or replay a session rather than a fixed test script deciding it in advance.
• What does not change: SameSite and Secure flags still block a cookie from being replayed on the wrong origin, and an HttpOnly cookie captured this way still cannot be read back out through document.cookie, so an agent automating one site cannot hand a captured cookie jar to page-level JavaScript on another.

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.