Development 101: JS Cookies

Remember back in class in college how the professor would be talking about what was on the outlined lesson plan for that session and out of nowhere they switched it up and started telling you a story related to the class? Well that is what this post today will be. I know I promised a little while ago that we would be going over databases, specifically MySQL, but I’m in a JavaScript(JS) mood and just gotta let it out.

That is why in this post we will do a quick crash into JS cookies. Sounds delicious right? Let’s go!!!!!!

 

What Are Cookies?

 

Cookies are delicious baked goods that are great when oatmeal rasion! Okay seriously cookies are a tracking method used to give off a temporary trail of where a user of a website has been. For an example think of when you login to a site, it can be anything from Amazon to your favorite online shop. After you’ve logged in go ahead and delete all your cookies. Now when you go back to that site you’ll likely be logged out, don’t worry if your not because we’ll be covering that later.

What you just did was when you removed your cookies is delete the temporary data that they hold. Now don’t cookies sound fun? Let’s get to making some.

 

Creating Cookies

 

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}

Well that looks pretty fun and easy right? Thanks to the people at Quirksmode.com. Okay let’s take some time and go over what is happening with all these JS functions.

createCookie

 

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

 

What this function here is doing should be pretty obvious from its name, but lets take a minute to break down how this is happening. It takes in three values for the cookie: name, value, and days. What this does is set what you’ll name the cookie, what value the cookie should store, and how long it should last. So everything here should be pretty straightforward, except for what is going on with the days value. So let’s break that down a little further.

Okay so when you want to first get minutes. As we all know there are 60 seconds in a minute, but in development we count with milliseconds and there are 1000 milliseconds in a second. So that explains the 60*1000. Moving on to the 60 next to it, that is used to get the number of milliseconds in an hour. The 24 after that is used to get the number of milliseconds in a day, and the days value you passed into the function is the number of days you want this cookie to last.

readCookie

 

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

 

What readCookie is doing here is taking the name of the cookie your trying to find the value of of, it then uses that to search through all cookies that are set in your browser by first storing them into an array and searching through that array. If nothing is able to be found, this function will return null.

eraseCookie

 

function eraseCookie(name) {
  createCookie(name,"",-1);
}

 

The eraseCookie function is a great example of DRY(Don’t Repeat Yourself) programming. It is using the already defined function createCookie to delete cookies by passing in the name of the cookie, setting its value to an empty string, and giving it the amount of days for it to last to a negative number so it will be expired.