The internet may be a bleak and stateless world of faceless communication of information, but there are tools that help to overcome the pitfalls of trying to develop some whizzo application of some measurable usefulness.

By stateless, of course, I am referring to a users’ pseudo position and condition in cyberspace (oooh, I haven’t heard that used in a while…sounds rather old skool nowadays). For example, if I point my browser window at some ‘ordinary’ website and then click on a link that takes me to another page on that very same website, on loading that second page the server has no real idea I was there before, or that I clicked on a link on that site to reach this new page.

Of course sites can be engineered to be stateful but passing information from one page to the next as you navigate through a websites’ pages. This is usually done through forms and form variables, which use ‘POST’ or ‘GET’ methods to pass information to the next page, or you can directly implement the ‘GET’ method within a URL. For example, passing a vaiable named bookid from one webpage to another at listbooks.html with the value of 63871209, and maybe send a price of ??5.99 can be done with a simple hypertext link such as:

<a href="listbooks.html?bookid=63871209&price=5.99">
  View This Book
</a>

I’m sure you’ve probably seen many examples of this while viewing many search engine results, online product catalogues, etc. The problem is as more and more pages are added to a web application, the use of these methods can become laborious to implement.

An alternative to this is the use of Session-only cookies, client-side storage of information required by a website as you browse through it. There is also permanent cookies, small text files which sit on your harddrive until deleted, but these are really only necessary if you wish to know if a user has been to your site before. They are neither required or justified for instances where information should be retained over a single browser “session”, which lasts from the time the browser window is opened, to the time the window is closed.

The writing and reading of information to/from a session-only cookie is done through the following javascript code:

Writing data to a session-only cookie

<script language="javascript">
  document.cookie("bookid=63871209");
</script>

Reading data from a session-only cookie is not as simple as writing data to it. When data is written to a cookie it is appended to the value held by document.cookie. Therefore after the above code the value of document.cookie would be “bookid=63871209″, if we had also stored the price of the book it might look like “bookid=63871209;price=5.99″, so in order to retrieve the value we need (63871209) we will have to split the data up. This is best done in a generic function into which we pass the name of the session-only cookie we wish to read and it returns the value of that cookie.

<script language="javascript">
  function get_cookie(Name)
  {
    var retVal = "";
    cookieIndex = document.cookie.indexOf(Name)
    if (cookieIndex != -1)
    { 
      cookieIndex += Name.length + 1
      cookieEnd = document.cookie.indexOf(";", cookieIndex);
      if (end == -1)
      {
        end = document.cookie.length;
      }
      retVal = document.cookie.substring(cookieIndex, cookieEnd))
    }
  }
  return retVal;
}
</script>

And there you have it, the ability to create a stateful web application on the client-side.