​A selection of topics on IT and its application to finance. 
​Send me your comments, questions ​or suggestions by clicking
h​ere


elmama
Using cookies to maintain state between web pages 


A common problem faced by web software developers is how to maintain state between web pages. Web pages are stateless, meaning that once pages are closed down they don't remember what they contained if you go back to them. The classic way to get around this problem is to use cookies. A cookie is simply a small text file - cookies.txt - created on the client computer that can hold various name=value pairings separated by semi-colons.They can have an expiry date set either immediately;end of the session (the default) or any time in the future  and once created any data contained in them can be read in so they become a useful temporary storage area for your programs to use.

To illustrate the type of problem cookies can solve imagine you have two web pages - your main home page and a secondary page containing a user selectable option (checkbox). Calling the options page from the main page, via a button say, the user then selects the option by clicking on the checkbox and closes the options page. When they do this all information about which option they selected is effectively lost due to the stateless nature of web pages. Ok you could say why not just keep the options page open but that would look sloppy and in any case it could be closed down accidentally at any time. Better to use cookies. Here's one way how.

Lets assume that you want to delete any existing cookie on your system before creating a brand new one. You can do this using the following code. First we need to create the cookie on our home page. This is often done in the <body onload ...> HTML tag

e.g

<html>
<head>
<script language=javascript>
function createcookie()
{
   /* setting expiry date in the past deletes the cookie
    document.cookie="expires=01-jan-00;"

   /* create a new cookie */
    document.cookie="expires=01-jan-10;"
}
</script>
<body onload="createcookie()">
          .
          .
          .
</head>
</html>


Now in our secondary options page we need to do two things; firstly when the page is initially displayed we need to check to see if the checkbox it contains has previously been checked in this session. This info will come from - you've guessed it - our cookie. Again this code will be run on the page <BODY onload ...> HTML tag.

<html>
<head>
<script language=javascript>
function getoption()
{
    var x = document.cookie;
    var re = /option=Y/i;
    var r = x.match(re);

   if (r != null)
    {
        options.checkbox1.checked=1;
    }
    else
    {
        options.checkbox1.checked=0;
    }
}

</script>
<body onload="getoption()">
          .
          .
          .
</head>
</html>


Secondly when the user clicks the desired option (checkbox) we need to write away our name/value pairing into the cookie file. Our HTML code would look something like:-


<html>
<head>
<script language=javascript>
function writecookie(obj)
{
    if(obj.checked == true)
    {
        document.cookie = "option=Y"
    }
    else
    {
        document.cookie = "option=N"
    }
}

</script>

</head>

<form name="options">
Option 1 <INPUT id=checkbox1 name=option1 onclick="writecookie(this)" type=checkbox value="ON">
</form>

</html>


Now back in our main page, if we want to determine whether or not the option is checked we just re-use some of the above code as in:

<script language=javascript>
function isoptionchecked()
{
    var x = document.cookie;
    var re = /option=Y/i;
    var r = x.match(re);

   if (r != null)
    {
        alert("checked");
    }
    else
    {
        alert("not checked");;
    }
}
</script>