Skip to main content

How to Check if a Cookie Exists in JavaScript

A common task in web development is to check if a specific cookie exists in the user's browser. This is essential for determining if a user is logged in, has a session token, or has seen a particular notification before. While you could read the entire document.cookie string and parse it manually, a much cleaner and more modern approach is to use a simple, reusable function.

This guide will teach you the most effective method for checking if a cookie exists by name. You will learn how to parse the document.cookie string and use modern array methods to get a clear true/false answer.

The Core Problem: Parsing document.cookie​

The document.cookie property in JavaScript is not a simple object; it's a single string containing all the cookies for the current domain, separated by semicolons.

To check for a specific cookie (e.g., session_id), you cannot just check if the string includes 'session_id'. A cookie named other_session_id would also match, leading to a false positive. You must parse the string to check for an exact key match.

The most readable and robust way to check for a cookie is to create a helper function that leverages modern array methods.

This function is all you need to reliably check for any cookie.

function cookieExists(name) {
  return document.cookie.split(';').some(item => 
    item.trim().startsWith(name + '=')
  );
}

// Example Usage:
// Let's assume these cookies have been set:
document.cookie = "username=Alice";
document.cookie = "theme=dark";

if (cookieExists('username')) {
  console.log('The "username" cookie exists.');
} else {
  console.log('The "username" cookie does not exist.');
}
// Output: The "username" cookie exists.

console.log(cookieExists('session_id')); 
// Output: false

How the cookieExists Function Works​

Let's break down this powerful one-liner:

  1. document.cookie.split(';'): This splits the cookie string into an array of individual key=value pairs.
    • "username=Alice; theme=dark" becomes ['username=Alice', ' theme=dark'].
  2. .some(item => ...): The Array.prototype.some() method checks if at least one element in the array passes a test. It returns true as soon as it finds a match, making it very efficient.
  3. item.trim(): Each item in the array might have leading whitespace (e.g., ' theme=dark'). .trim() removes this, giving us a clean string like 'theme=dark'.
  4. .startsWith(name + '='): This is the crucial check. It verifies if the trimmed cookie string starts with the exact name you are looking for, followed by an equals sign. This prevents partial matches (e.g., searching for 'user' won't accidentally match 'username').

How to Get a Cookie's Value​

If you not only need to know if a cookie exists but also need to retrieve its value, you can create a similar getCookie function.

Solution:

function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.trim().split('=');
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null; // Return null if the cookie is not found
}

// Example Usage:
const username = getCookie('username');
if (username) {
  console.log(`Welcome back, ${username}!`);
} else {
  console.log('No user is logged in.');
}

Conclusion​

While document.cookie provides a primitive interface, checking for a cookie's existence can be made simple and reliable with a modern helper function.

  • The recommended best practice is to create a reusable cookieExists(name) function that uses .split(';') and .some() to perform the check.
  • The key to an accurate check is to use .trim() and .startsWith(name + '=') to ensure you are matching the exact cookie name.
  • If you need the cookie's value, a similar function that splits the key=value pair and returns the value is the best approach.

Table of Contents