Setting Cookies

14 Jan

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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: