Setting, storing, and retrieving cookie data with javascript

Cookies -- those scrumptious little bits of precious data.

What is a cookie?
A cookie is a text file containing information about a user pertinent to a website. They are important as http is a stateless protocol. (This means servers cannot remember things about their users) (This is a good thing this means no-one can track your internet use accross servers). This does create some problems for people who use secure access, if someone were to leave the site they would have to revalidate everytime they go back to it, additionally the server won't remember anything about your prefrences, or settings. Cookies were created to circumvent that problem they give each computer a memory of sites and preferences.

Cookies are made up of several things
1. A name-value pair which stores whatever data you want to save.
2. An expire date, after which time the entry will be deleted.
3. The web domain and path that the entry should be associated with.
Setting a cookie is just like declaring a variable
document.cookie = "value=yes; expires=Wed, 13 Mar 2003 00:00:01 UTC; path=/";
alert(document.cookie);
This will display your cookie name and cookie value.
OK now we have the basics, now we set and retieve cookies usefully
<script>

function set_Cookie(name, value, days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}



function get_Cookie(name)
{
var CValue="";
var cook = document.cookie.split(';');
var nameIs = name + "=";
for(var i=0; i < cook.length; i++)
{
var spc = cook[i];
while (spc.charAt(0)==' ')
spc = spc.substring(1, spc.length); file://delete spaces
if (spc.indexOf(nameIs) == 0)
{
CValue = spc.substring(nameIs.length, spc.length);
alert(CValue);
return CValue;
}
}
return null;
}

</script>

What do we do with this?
we can use it to store data fairly easily.
first we have the option to give a name and a value to the cookie (if days aren't specified it becomes a session cookie).
so lets say we want to remember someones name from a form we have a form
<form name="cForm">
Name
<br />
<input type="text" name="txt1" value="" />
<br />
<input type="button" value="Set Cookie"
onclick="set_Cookie('imacookie',document.forms[0].txt1.value,30);" />
<input type="button" value="Get Cookie"
onclick="get_Cookie('imacookie');" />
</form>


Name

That will retrieve one peice of data, the name.
How dow we get more stuff stored in a cookie?
Thats the easiest part of all, all we have to do is associate it with another name, our cookie will store all sorts of data.
<form name="cForm2">
Name
<br />
<input type="text" name="txt1" value="type" />
<input type="text" name="txt2" value="stuff" />
<input type="text" name="txt3" value="in" />
<input type="text" name="txt4" value="these" />
<br />
<input type="button" onclick="set_Cookie('imacookie',document.cForm2.txt1.value,30);
set_Cookie('imacookie2',document.cForm2.txt2.value,30);
set_Cookie('imacookie3',document.cForm2.txt3.value,30);
set_Cookie('imacookie4',document.cForm2.txt4.value,30);" />
<input type="button" value="Get Cookie"
onclick="get_Cookie('imacookie');
get_Cookie('imacookie2');
get_Cookie('imacookie3');
get_Cookie('imacookie4');" />
</form>
Name

One final thing to do... learn how to delete a cookie.
It is amazingly simple, All we have to do is call the set_Cookie method we already created, and put in a negative expire date.
set_Cookie("imacookie", "", -1);