Everyone that browses the web has heard the term cookies thrown around every once in a while. Whether it is originally defined as data, evil little programs that hackers use, annoying things that cause popups, everyone has heard of cookies.

I, too, was once one of the people that thought they knew what cookies were. I thought that it was data that the WebBrowser stored to keep track of things. For example, remembered usernames and passwords and addresses were stored in cookies. Cookies were my friend and sometimes I needed to clear them in order to get a website to function properly.

I was only half-right, however. The other day I was assigned the task of making a JavaScript page that automatically refreshed itself every 5 seconds. Easy enough. I created the HTML layout, added in a few dynamic Java calls to get some data, and then added in the JavaScript method that would refresh the page. For reference, the method looked a little something like this:

function StartTime(){
        setTimeout("RefreshPage()",5000);
}
    
function RefreshPage(){
        if(document.Refresh.auto.checked)
        window.location.reload();
}

 

All was well and the page functioned as it should. That is, until I needed to add a toggle switch that would hide or display a <div> HTML tag. That’s when things got really tricky. The problem was not building the toggle button or the JavaScript function that changed the style=display property of the tag, but rather, after making this, I realized that every time the page was refreshed, the toggle would be flipped again.

So how could the webpage memorize the user’s choice on whether or not the toggle should be flipped? My initial thought was to make something like a global boolean variable that kept track of the state. Something like so:

<%! boolean hideDiv = false; %>

Then the thought occurred to me. What if many, many users are visiting the page at one time and they are all toggling this variable? Since the page is being rendered on the server, a toggling of the variable means that all users are affected by any toggle that one user makes. So how could I store the user’s preference in their browser locally without affecting any other user?

A-ha! So that’s what cookies are for! After some research, a website’s cookies are essentially stored in a semi-colon delineated string that contains many key-value pairs. For example, a cookie string could look like:

fruit=apples;vegetable=corn

This information is stored locally by the user and is stored specifically for the website that stores the cookies. The website can also get the cookies as well. So, in order to solve my problem, I created a cookie that tracked whether or not the div needed to be displayed. Something like:

displayDiv=false

This cookie was then saved every time the user pressed the toggle button (with its respective value, of course) and was retrieved every time the page needed to refresh.

Cookies are surprisingly fast, too. I expected the page load times to slow down significantly since data was being retrieved from the disk, but it didn’t seem to have much slowdown. Of course, this could be because we are running machines with huge amounts of memory and processing power and all we are trying to retrieve is a few bytes of text (don’t quote me on that — that’s not the exact filesize whatsoever).

So, until very, very recently I did not know exactly what cookies were. Hopefully this helps you discover their true meaning. In short,

cookies are a set of key-value pairs, specific to a website, that are saved and managed by the user’s browser. They come in a semi-colon delineated list and have the ability to expire after a certain amount of time. They are used to store data locally that is usually specific to the user.

For those that are curious, my implementation of saving and getting cookies looked a little something like this:

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (50*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
  }

  function getCookie(cname) {
    var name = cname + "=";
    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);
      if (c.indexOf(name) != -1) 
      {
        if (c.substring(name.length, c.length).contains("="))
          return c.substring(name.length, c.length).split("=")[1]
        else
          return c.substring(name.length, c.length)
      }
    }
    return "";
  }

Note that by default, my setCookie method sets the cookie to expire after 50 days.