How do I check if a cookie exists?

javascript

cookie-engineering

javascript-utilities

web-development

byNikita Barsukov·Sep 14, 2024

Here is a quick and easy way to check if a cookie exists in JavaScript:

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

// Checking for a pending 'lifeDecisions' cookie
hasCookie('lifeDecisions');

This one-liner deftly searches for the cookie named 'lifeDecisions'. If the cookie is there, the function returns true; if not, it's false.

On a diet, checking if a cookie exists can be a dreaded process, but fortunately for web developers, it's a lot simpler and less caloric-intensive! Cookies are crucial to storing critical data on the client's browser and poking around in their dark corners can be key for managing sessions, user preferences, and tracking functions. The hasCookie function presented in the fast answer section fights this cookie monster pretty well.

Content matters: Validating a cookie's value

On some occasions, simply knowing a cookie exists is not enough. You may need to sneak a peek at its content, or in Cookie Monster's words, "me want cookie where value not null!":

function getCookieValue(name) {
  let matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  // Cookie Monster says: "Me like cookie dough, but me prefer baked cookies" 
  return matches ? decodeURIComponent(matches[1]) : null;
}

// Example usage: Hunting for the 'noms' cookie value
getCookieValue('noms'); // Could be "chocolate chip" or null if no cookie found

This handy function, getCookieValue, helps you fetch the cookie's value like a ninja - quietly and accurately. It returns the value or null if the cookie doesn't exist, that's like getting an "IOU cookie" note from the server.

In a crowd of many cookies, it's possible for cookies with similar names or blank values to throw you off the scent. Here's how our special recipe keeps things in check:

Cookie name overlap: There could be 'user' and 'username' cookies that can mix up. We want cookie, not confused soup!
Bare Cookies: Blank values? Not on our watch. We doSomething only if getCookieValue('yourCookie') returns an actual string, not some invisible ink nonsense.
Ghost Cookies: Sometimes a cookie is set with no value, like it's there but not there. Spooky, right? Those cookies are marked for deletion, treat cookie_name=; as non-existent.

If you find yourself dealing with tricky cookies, don custom regex patterns to match those specific formats, like a detective adjusting their magnifying glass:

// Regex to exclude cookies set for deletion
let cookiePattern = new RegExp('cookie_name=([^;]+)(?!;expires=Thu, 01 Jan 1970 00:00:00 GMT)');

With regex, you can turn your cookie detection level up to 11, excluding weird expired cookies or those marked for deletion.

Ensuring uniqueness: Navigating naming nuances

Keep your cookies in order! Use unique and descriptive names while creating cookies, and practice precise matching while checking to prevent mix-ups. Nobody wants a sugar cookie when they were promised chocolate chip, after all!

Decluttering: Deleting surplus cookies

Once you're done checking and gobbling up the necessary cookies, it's time to tidy up:

function deleteCookie(name) {
  document.cookie = name + '=; Max-Age=0';
}

// Example usage: Bidding goodbye to the 'dislikedFlavor' cookie
deleteCookie('dislikedFlavor');

The deleteCookie function works like a little broom, sweeping away cookies that have outlived their usefulness, and it does its work impressively well!

Best practices: Watch your step!

Dealing with cookies can sometimes be a gooey mess. Here are some tips to avoid sticky situations:

Case Sensitivity: Cookies have feelings too—they're case-sensitive so make sure the names match.
Encoding: Remember encodeURIComponent while setting and decodeURIComponent while getting cookies. No one likes misinterpreted cookies.
Scope: Cookies set in different paths and domains. Be sure to look under all the benches while hunting for those cookies!