Set cookie and get cookie with JavaScript

javascript

cookie-engineering

javascript-apis

web-development

byNikita Barsukov·Mar 6, 2025

For confident cookie management in Javascript, use these precise setCookie and getCookie functions. setCookie assembles a cookie by merging name, value, and expiration into a clean string. getCookie scans the browser's cookie string to pull out the desired cookie's value by its name.

function setCookie(name, value, days) {
  // 864e5 == 86400000 == 24*60*60*1000 
  let expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires};path=/`;
}

function getCookie(name) {
  let cookie = document.cookie.split('; ').find(row => row.startsWith(name + '='));
  return cookie?.split('=')[1] || null;
}

// Set and retrieve 'example' cookie 🍪
setCookie('example', 'value', 7); // Stores 'example' cookie. Good for 7 days, 7 is the magic number 🎲
console.log(getCookie('example')); // Serves the 'example' cookie's value. Hot & fresh! 🍽️

Remember to leverage encodeURIComponent to handle special characters in setCookie and use the find method in getCookie for a slick retrieval process.

Deleting cookies: Ghosting your cookies with `eraseCookie`

Want to ghost your cookies? Use eraseCookie which works by assigning an expired date to the cookie you want to ghost:

function eraseCookie(name) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;'; // Overwrite and set past expiry 📅
}

eraseCookie('example'); // 'example' cookie has now joined 'The Ghost Cookies Club' 👻🍪

Encoding and decoding: Say no to character assassinations!

When dealing with cookie values that might contain special characters, calling escape() and unescape() is a good practice:

function setCookie(name, value, days) {
  // ...
  document.cookie = `${name}=${escape(value)};expires=${expires};path=/`;  // "I solemnly swear the cookie is up to no good" 🍪🔮
}

function getCookie(name) {
  let cookieValue = document.cookie.split('; ').find(row => row.startsWith(name + '=')).split('=')[1] || null;
  return cookieValue ? unescape(cookieValue) : null;
}

Cookie lifespan matters. Define consistent durations for cookies to ensure a predictable user experience:

function setLongTermCookie(name, value) {
  setCookie(name, value, 365); // Sets a cookie that lasts longer than most New Year's resolutions 💪🎇
}

function setSessionCookie(name, value) {
  document.cookie = `${name}=${encodeURIComponent(value)};path=/;`;  // "In the next browser session, this cookie will be... THE PRETENDER"
}

Advanced use

CSS choice persistence: Remembering is hard

document.getElementById('themeSelect').onchange = function() {
  setCookie('theme', this.value, 30);    // Remember theme selection for 30 days. Sometimes it lasts in love, but sometimes it's stored in a cookie 🍪❤️
};

document.addEventListener('DOMContentLoaded', (event) => {
  let savedTheme = getCookie('theme');
  if(savedTheme) {
    document.getElementById('themeSelect').value = savedTheme;    // Theme is restored like a lost puppy finding its way home 🐶
  }
});

Watch out for gotchas 🙈

Aside from handling special characters, do not forget to validate user selections against placeholder values before saving to cookies.

function setValidatedCookie(name, value, placeholder) {
  if(value !== placeholder) {
    setCookie(name, value, 30);  // Value that isn't a placeholder goes to the disco (cookie) 🕺🍪
  }
}

Cookie policies across browsers and cookie behavior can be ticklish. Embrace attributes like Secure and SameSite for a secure cookie setting.

function setSecureCookie(name, value, days) {
  let expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)};Secure;SameSite=Strict;expires=${expires};path=/;`  // Cookie with VIP-level security settings gets the velvet-rope treatment 🕶️
}