By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Setting, getting and deleting cookies with JavaScript

Learn how to manage cookies with JavaScript.

Edited: 2015-08-13 00:14

JavaScript logo

This tutorial focuses on how to set and delete cookies in JavaScript. To make things easier, we can choose to create a function for each action we want to perform, that is, one for setting cookies and one for deleting cookies.

Getting and setting cookies can generally be done using document.cookie, but typically we also want to set a expiration date, at which point the browser will automatically delete the cookie.

We have created a few functions to help you set, retrive, and delete cookies with JavaScript. Here we use HTML buttons as an example. For those interested, an explanation of the actual code is also included in the tutorial.

You can find a live test HTML file here.

The clean and friendly JavaScript functions:

function setCookie(n, value, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    document.cookie = n + "=" + value + "; " + "expires=" + d.toUTCString();
}
function getCookie(n) {
    var r = document.cookie.match(n+'\\s*=\\s*([^;]+)');
    return r ? r.pop() : 'N/A';
}
function delCookie(n) {
  document.cookie = n +'=; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

The above code when minimized:

function setCookie(n,value,exdays){var d=new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));document.cookie=n+"="+value+"; "+"expires="+d.toUTCString();}
function getCookie(n){var r=document.cookie.match(n+'\\s*=\\s*([^;]+)');return r?r.pop():'N/A';}
function delCookie(n){document.cookie=n+'=; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';}

Setting cookies with JavaScript

The d = new Date() part of the code below, creates a new date object that we can work with, and assigns it to the variable called d.

Calculating dates are typically done by using milliseconds, so to get the right date when setting new cookies, the setTime method of JavaScript is used. But since cookies should be in UTC format, we are also using toUTCString, to convert the expiration date into a UTC formatted string.

function setCookie(name, value, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  document.cookie = name + "=" + value + "; " + "expires=" + d.toUTCString();
}

Getting cookie values with JavaScript

Returning the value of a set cookie, requires a little more code since cookies are stored as a string in document.cookie. One of the best ways to return a cookie value, is to use a regular expression, just like below:

function getCookie(n) {
  var r = document.cookie.match(n+'\\s*=\\s*([^;]+)');
  return r ? r.pop() : 'N/A';
}

When this function is called, the actual value of the cookie will be returned. After having set a cookie, way to test this in the HTML could be by using:

  <button onClick="alert(getCookie('nameOfCookie'))">

This function should be fairly reliable, and is minimizable to 85 bytes! Minimized:

function g(n){var r=document.cookie.match(n+'\\s*=\\s*([^;]+)');return r?r.pop():'';}

Using a regular expression creates the smallest code, by far, the downside is that people may find it hard to read.

Deleting a cookie with JavaScript

Deleting a cookie in JavaScript is a bit messy, you have to set the expiration date to a date in the past, and clear the cookie value:

function delCookie(n) {
  document.cookie = n +'=; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}