Hands On: How to set and check Javascript cookies

And if you wanted to set another cookie, just do the same thing again. ­

You can have lots of cookies on a page and, although it looks as if when you use document.cookie you’re setting a variable, that’s not really the case. ­

You’re telling the browser to set the cookie, and so setting another one with a different name won’t overwrite the first one.

So how do you see cookies? This is where Javascript becomes somewhat less than elegant; document.cookie is a single string, containing all the cookies applicable to the page (based on the domain and path info).

Suppose we’d set another cookie, to indicate a user was an old hand on our site, newuser=false. Put a little code like this in a web page:

document.cookie = ‘popupshown=true; expires=Thu, 14 Feb 2007 12:00:00 UTC; path=/’ ;
document.cookie = ‘newuser=false’ ;
document.write (document.cookie);

What’s sent back is a single string that contains all the cookies, separated by a semicolon, so if you have multiple cookies, you then have to split the string to see which cookies are set.

And, of course, since you use semicolons to separate the options when you create cookies, you have to make sure that you don’t use them for the actual value.

So, you’re going to need a couple of functions to make cookies a little more manageable; first, how about getting that expiry date right?

In Javascript, you can get the current date and time via a Date object ­ in milliseconds since 1 January 1970. Say you want that cookie to expire in seven days time, that’s 7 days x 24 hours x 60 minutes x 60,000 milliseconds.

Object variables in Javascript have ‘methods’ which are like functions, which you append to the variable name, like this, setting the expiry time to seven days from the current one.

expiretime = new Date() ;
expiretime.setTime(expiretime.getTime() + 7*24*60*60000) ;

And we can join two bits of a string together using the + operator, like this:

document.cookie = ‘popupshown=true; expires=’ + expiretime.toGMTString();

After we’ve added this code to a sample page, the highlighted line in the cookie list in our browser shows a date seven days after the page was displayed.

Reading the cookie is a little more challenging; we have to search through the document.cookie value to find the name followed by an equals sign, and then look at everything from there up to the next semicolon.

Here’s one, very basic, way of doing it:

cookiename = ‘popupshown’ ;

if (document.cookie.indexOf(cookiename) != -1 )
{
cookiestart=document.cookie.indexOf(cookiename)+cookiename.length+1 ;

cookieend=document.cookie.indexOf(‘;’,cookiestart-1);

value = document.cookie.substring(cookiestart, cookieend);
} else {
value = ‘not set’ ;
}

document.write(‘

Pop up value is ‘ + value + ‘

’) ;