Chapter 11

In this chapter we looked at storing small amounts of information, called cookies, on the user's computer and using that information to customize our website for the user.

Question 1

Create a page that keeps track of how many times the page has been visited by the user in the last month.

<html>
<head>
<script language=JavaScript>
    
function getCookieValue(cookieName)
{
   var cookieValue = document.cookie;
   var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "=");
    
  if (cookieStartsAt == -1)
  {
      cookieStartsAt = cookieValue.indexOf(cookieName + "=");
  }
    
   if (cookieStartsAt == -1)
   {
      cookieValue = null;
   }
   else
   {
    
      cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
      var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
      if (cookieEndsAt == -1)
      {
         cookieEndsAt = cookieValue.length;
      }
      cookieValue = unescape(cookieValue.substring(cookieStartsAt,
         cookieEndsAt));
   }
    
   return cookieValue;
}
    
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;
}
    
var pageViewCount = getCookieValue("pageViewCount");
var pageFirstVisited = getCookieValue("pageFirstVisited");
    
if (pageViewCount == null)
{
   pageViewCount = 1;
   pageFirstVisited = new Date();
   pageFirstVisited.setMonth(pageFirstVisited.getMonth());
   pageFirstVisited = pageFirstVisited.toGMTString();
   setCookie("pageFirstVisited",pageFirstVisited,""," ")
}
else
{
   pageViewCount = Math.floor(pageViewCount) + 1;
}
    
setCookie("pageViewCount",pageViewCount,""," ")
    
</script>
</head>
<body>
<script>
var pageHTML = "You've visited this page " + pageViewCount;
pageHTML = pageHTML + " times since " + pageFirstVisited;
document.write(pageHTML);
</script>
</body>
</html>

Save this as ch11_q1.htm.

We discussed the cookie functions in Chapter 11, so let's turn straight to the new code.

In the first two lines we get two cookies and store them in variables. The first cookie holds the number of visits, the second the date the page was first visited.

var pageViewCount = getCookieValue("pageViewCount");
var pageFirstVisited = getCookieValue("pageFirstVisited");

If the pageViewCount cookie does not exist, it's either because the cookie expired (remember we are counting visits in the last month) or because the user has never visited our site before. Either way we need to set the pageViewCount to 1 and store the date the page was first visited plus one month in the pageFirstVisited variable. We'll need this value later when we want to set the expires value for the pageViewCount cookie we'll create because there is no way of using code to find out an existing cookie's expiration date.

if (pageViewCount == null)
{
   pageViewCount = 1;
   pageFirstVisited = new Date();
   pageFirstVisited.setMonth(pageFirstVisited.getMonth() + 1)
   pageFirstVisited = pageFirstVisited.toGMTString();
   setCookie("pageFirstVisited",pageFirstVisited,"",pageFirstVisited)
}

In the else statement we increase the value of pageViewCount.

else
{
   pageViewCount = Math.floor(pageViewCount) + 1;
}

We then set the cookie keeping track of the number of page visits by the user.

setCookie("pageViewCount",pageViewCount,"",pageFirstVisited)

Finally, later on in the page we write out the number of page visits and the date since the counter was reset.

var pageHTML = "You've visited this page " + pageViewCount;
pageHTML = pageHTML + " times since " + pageFirstVisited;
document.write(pageHTML);

Question 2

Use cookies to load a different advertisement every time a user visits a web page.

<html>
<head>
<script language=JavaScript>
    
function getCookieValue(cookieName)
{
   var cookieValue = document.cookie;
   var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "=");
    
  if (cookieStartsAt == -1)
  {
      cookieStartsAt = cookieValue.indexOf(cookieName + "=");
  }
    
   if (cookieStartsAt == -1)
   {
      cookieValue = null;
   }
   else
   {
    
      cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
      var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
      if (cookieEndsAt == -1)
      {
         cookieEndsAt = cookieValue.length;
      }
      cookieValue = unescape(cookieValue.substring(cookieStartsAt, cookieEndsAt));
    
   }
    
   return cookieValue;
}
    
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;
}
    
</script>
</head>
<body>
<img src="AdvertImage1.jpg" name="imgAdvert">
<script>
    
var imageNumber = getCookieValue("displayedImages");
var totalImages = 3;
    
if (imageNumber == null)
{
   imageNumber = "1";
}
else
{
   imageNumber = Math.floor(imageNumber) + 1;
}
    
if (totalImages == imageNumber)
{
   setCookie("displayedImages","","","Mon, 1 Jan 1970 00:00:00");
}
else
{
   setCookie("displayedImages",imageNumber,"","");
}
    
document.imgAdvert.src = "AdvertImage" + imageNumber + ".jpg";
</script>
</body>
</html>

Save this as ch11_q2.htm.

This solution is based on similar questions in previous chapters, such as Chapter 9 where we displayed a randomly selected image. In this case we display a different image in the page each time the user visits it, as far as our selection of images allows.

We've seen the cookie setting and reading functions before in the chapter, so let's look at the new code.

We store the number of the previously displayed image in a cookie named displayedImages. The next image we display is that image number + 1. Once all of our images have been displayed, we start again at 1. If the user has never been to the website, no cookie will exist so null will be returned from getCookieValue(), in which case we set imageNumber to 1.

Most of the code is fairly self-explanatory, except perhaps this line:

if (totalImages == imageNumber)
{
   setCookie("displayedImages","","","Mon, 1 Jan 1970 00:00:00")
}

What this bit of code does is delete the cookie by setting the cookie's expiration date to a date that has already passed.