Creating a Cookie-Javascript

To make life easier for ourselves, we'll write a function that allows us to create a new cookie and set certain of its attributes with more ease. We'll look at the code first and create an example using it shortly.

function setCookie(cookieName, cookieValue, cookiePath, cookieExpires)
{
   cookieValue = escape(cookieValue);
   if (cookieExpires == "")
   {
      var nowDate = new Date();
      nowDate.setMonth(nowDate.getMonth() + 6);
      cookieExpires = nowDate.toGMTString();
   }
   if (cookiePath != "")
   {
      cookiePath = ";Path=" + cookiePath;
   }
   document.cookie = cookieName + "=" + cookieValue +
      ";expires=" + cookieExpires + cookiePath;
}

The secure and domain parts of the cookie string are unlikely to be needed, so we just allow the name, value, expires, and path parts of a cookie to be set by the function. If we don't want to set a path or expiration date, we just pass empty strings for those parameters. If no path is specified, the current directory and its subdirectories will be the path. If no expiration date is set, we just assume a date six months from now.

The first line of the function introduces the escape() function, which we've not seen before.

cookieValue = escape(cookieValue);

When we talked about setting the value of a cookie, we mentioned that certain characters cannot be used directly, such as a semicolon. (This also applies to the name of the cookie.) To get around this problem, we can use the built-in escape() and unescape() functions.

alert(escape("2001 a space odyssey;"));

We can see that the spaces have been converted to %20, % indicating that they represent an escape or special character rather than an actual character, and that 20 is the ASCII value of the actual character. The semicolon has been converted to %3B, as we'd expect.

As we'll see later, when retrieving cookie values we can use the unescape() function to convert from the encoded version to plain text.

Back to our function; we next have an if statement.

   if (cookieExpires == "")
   {
      var nowDate = new Date();
      nowDate.setMonth(nowDate.getMonth() + 6);
      cookieExpires = nowDate.toGMTString();
   }

This deals with the situation where an empty string, "", has been passed for the cookieExpires parameter of the function. Because most of the time we want a cookie to last longer than the session it's created in, we set a default value for expires that is six months after the current date.

Next, if a value other than an empty string ("") has been passed to the function for the cookiePath parameter, we need to add that value when we create the cookie. We simply put "path=" in front of any value that has been passed in the cookiePath parameter.

   if (cookiePath != "")
   {
      cookiePath = ";Path=" + cookiePath;
   }

Finally on the last line we actually create the cookie, putting together the cookieName, cookieValue, cookieExpires, and cookiePath parts of the string.

   document.cookie = cookieName + "=" + cookieValue +
      ";expires=" + cookieExpires + cookiePath;

We'll be using the setCookie() function whenever we want to create a new cookie because it makes setting a cookie slightly easier than having to remember all the parts we want to set. More importantly, it can be used to set the expiration date to a date six months ahead of the current date.

For example, to use the function and set a cookie with default values for expires and path we just type the following:

setCookie("cookieName","cookieValue","","")