Setting a basic cookie is very easy. All you have to do is create a string in the form of cookie_name=value and then set the document.cookie property to that. The only trick: cookie values must never have spaces, commas, or semicolons. Happily, you don’t really have to worry about this because a pair of functions will code and decode your properties: they are escape() and unescape().
Our simple example, which stored your name as a cookie, looks like this:
function setCookie()
{
var the_name = prompt(“What’s your name?”,”");
var the_cookie = “wm_javascript=username:” + escape(the_name);
document.cookie = the_cookie;
alert(“Thanks, now go to the next page.”);
}
The middle two lines of this function are the critical ones:
var the_cookie = “wm_javascript=username:” + escape(the_name);
If I entered “dave thau” at the prompt, this line would create a string that looks like wm_javascript=username:dave%20thau.
This means that I’m going to save a cookie named wm_javascript to the hard drive. That cookie is going to have the value username:dave%20thau – the escape() function replaced the space between “dave” and “thau” with a %20.
When we read the cookie, we’re going to look for the cookie named wm_javascript, then grab the username:dave%20thau, unescape() it, and chop off the username:.
document.cookie = the_cookie;
Reading Cookies
________________________________________
Once you save a cookie to someone’s hard disk, it’s easy to read. Here’s the code that reads the example cookie:
function readCookie()
{
var the_cookie = document.cookie;
var broken_cookie = the_cookie.split(“:”);
//Split the cookie into two parts at the colon.
var the_name = broken_cookie[1];
//Grab the part after the colon
var the_name = unescape(the_name);
/*Undo the stuff that the escape() function created. In this case, it pulled out the space and dropped in %20. Swap the space back in with unescape().*/
alert(“Your name is: ” + the_name);
}
If you want your cookie to contain more than just one piece of information, you can make the value of the cookie as long as you want. Say you’re looking to store a person’s name, age, and phone number. You do something like this:
var the_cookie = “username:thau/age:older than the hills/phone:411″;
document.cookie=”my_happy_cookie=” + escape(the_cookie);
As with our simple example, the easy part is setting the cookie. Things get a little sticky, however, when it comes to pulling the information out of the cookie when you need it. I suggest using associative arrays to store all the information. For example, let’s say you saved this to someone’s hard drive:
my_happy_cookie=username:thau/age:older than the hills/phone:411
You could put the information into a handy associative array like this:
function readTheCookie(the_info)
{
// load the cookie into a variable and unescape it
var the_cookie = document.cookie;
var the_cookie = unescape(the_cookie);
// separate the values from the cookie name
var broken_cookie = the_cookie.split(“=”);
var the_values = broken_cookie[1];
// break each name:value pair into an array
var separated_values = the_values.split(“/”);
// loop through the list of name:values and load
// up the associate array
var property_value = “”;
for (loop = 0; loop
