Get cookie by name

Avoiding iterations via split()

Skip the tiring iteration through cookies. Instead, prepend "; " to document.cookie and cleverly use split() to target your cookie:

function getCookie(name) {
  // Here's a splitting image of your cookie hunt
  const fullCookieString = '; ' + document.cookie;
  const splitCookie = fullCookieString.split('; ' + name + '=');
  // If found, we're popping the cookie out to serve. Enjoy!
  return splitCookie.length === 2 ? splitCookie.pop().split(';').shift() : null;
}


This solution efficiently sniffs out the right cookie, even in tricky edge cases where the cookie is at the end of the document.cookie string or when cookie names could be substrings of each other.

Searching with regular expressions

When there's a chance for a cookie name like "obligations" to get mixed up with a similar-sounding rascal like "obligations_new", bring in the big guns — regular expressions:

function getCookie(name) {
  // Cooking up a regex recipe for the perfect cookie search
  const regex = new RegExp(`(?:(?:^|;\\s*)${name}=([^;]*))`);
  const match = document.cookie.match(regex);
  // Did we find a match? Yay!
  return match ? decodeURIComponent(match[1]) : null;
}


With this approach, even pesky special characters are tamed and the regular expression integrity is maintained.

Cookie handling using jquery-cookie

For the folks who love a good helping of libraries, the jquery-cookie plugin has some sweet offerings:

// Hungry for a cookie?
let cookieValue = $.cookie('obligations');

// Crumbs! We need to remove this cookie
$.removeCookie('obligations');


This plugin saves your day when dealing with cross-browser compatibility issues.

Swift one-liner extraction

Fancy a quick, no-nonsense one-time retrieval? Here's your recipe-ready, action-packed JavaScript one-liner:

// A super quick cookie snatch, for the impatient cookie monster in you
const cookieValue = (document.cookie.match('(^|; )' + encodeURIComponent('obligations') + '=([^;]+)') || []).pop() || null;


Case sensitivity and content formatting

Remember, cookie names can be pretty picky. When matching names, always remember cookies are case-sensitive. And the formatting of document.cookie string? Cookies separated by a semicolon and cheekily waving at you with a space after the semicolon.

Visualization

Step into a delightful world where you pick your own cookie from a colorful array:

function getCookie(name) {
  let cookie = { "chocoChip": "🍪", "oatmeal": "🌾", "sugar": "🍬" };
  return cookie[name];
}


Search Process:

Cookie Jar (🍯): ["chocoChip", "oatmeal", "sugar"]
Cookie Hunt (🔍): "oatmeal"
Cookie Found (🌾): Oatmeal Cookie

It's as fun as picking the right treat by its label in a jar full of assorted cookies! 🍪🔍🌾

Tricky territory and problem-solving

Working with cookies is no piece of cake. It can be a rough ride, what with security issues, compatibility woes, and performance hitches. Here are some clues to crack the code:

Large cookie handling

Large cookie? Or a bunch of sleep-depriving cookies? Either way, our methods above are designed to chew through such challenges with peak performance and efficiency.

Secure cookies and HTTPS

Get friendly with HTTPS to deal with secure cookies. These cookies, set with Secure attribute, are no-shows on non-secure pages.

Decoding special characters

For cookies sporting encoded characters, like %20, bring them to their senses with decodeURIComponent() to retrieve the actual value:

return cookie ? decodeURIComponent(cookie.split('=')[1]) : null;


Supporting older browsers

Even if your cookie code is super modern, remember some of your users might still be browsing the old school way. In such cases, turning back time and using a manual iteration through document.cookie string could save the day.