Ken Ward's Java Script Tutorial ...

Cookies 2

More on setting cookies

Enter a name in the box and then press 'Set Name'. After doing this, press 'Show Cookie'.

  I get:

cookie2.gif (3909 bytes)

We recognise the 'Cookie Name=Ken' bit but what about all the other stuff? And how come the cookie persists now? (If you turn everything off then the cookie still retains its data!)

First, we have used another function to set the cookie value:

//First we make a variable called expdate which we eventually

//make equal to a year. It is a value in milliseconds.

//We add the number of milliseconds in a year to it. If we want some other time,

//then we can change the number

//of days from 365 (the maximum).

var expdate = new Date ();

expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000*365));

// 1 yr from now

//Our set cookie function has changed a bit.

//We call it from our button using:

//setCookie('Cookie Name ',this.form.cookieName.value,expdate)

//This puts in the variable name, value, and expires, into the cookie function

//So we create some data with the name equal to the string 'Cookie Name ',

//the cookie name we put in the text box

//and the expiry date we entered above.

//We have used only a few of the options in the function.

function setCookie(name, value, expires, path, domain, secure) {

// Some characters - including spaces - are not allowed in cookies

//so we escape to change the value we have entered into

//a form acceptable to the cookie.

var thisCookie = name + "=" + escape(value) +

((expires) ? "; expires=" + expires.toGMTString() : "") +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

((secure) ? "; secure" : "");

document.cookie = thisCookie;


The result of the above is that we add the data 'Cookie Name =Ken'.

We add the other information by using the same function with different values:

setCookie ("ccpath", "", expdate);

setCookie ("ccname", "Ken Ward's JavaScript Tutorial", expdate)

The form of these is exactly the same as the previous example. We use our variable expdate to make the cookies last a year, and we add other information on the name and value elements of the function.

When we press the button, 'Show cookie', we call the following function:

function showCookie(){



Whereas we used escape to turn the original data into a form the cookie liked, we use unescape to change it back into a form that human beings like! Without unescape the data would look like this:

cookie2a.gif (2115 bytes)

Human beings tend not to like it!

Now you have the power to create cookies, you no doubt want to have the power to get information from them.

The jsEditor contains a cookie wizard to put the basic code into your page. You can modify this code to create the effects you want. In addition to its many other features, you can use the jsEditor's knowledge base to explore the Math object. You can order the jsEditor online and download the full version immediately, so in a few minutes you could be using it to help you learn and develop scripts.


Ken Ward's HTML Guide...