mkaz.com home photography web dev about

JavaScript : Cookies

Here's a brief tutorial on how to use cookies using JavaScript. A cookie is a way you can store a tiny bit of information from a user visiting your site. The information is stored on the users computer, and thus does not require any extra server space no matter how many users you may have.

Some ways you can use cookies is to save user preferences, to customize data, or to keep track of ordering items while a user browses. Cookies can help give a personal touch to your page by remembering the information the user gave last time.

To use Cookies there are two things you need to do, one is set the cookie, and the other is retrieve the cookie you have already set. Here's how you do it:

Setting the Cookie:

The JavaScript code you use to set your cookie is:

document.cookie = name + "=" + escape(value) + "; expires=" + expdate.toGMTString();
Note that is one complete line

The 'name' variable is the name of the cookie you set, this is used when retrieving the cookie.

The 'value' variable is the value you want to set. The function 'escape(value)' encodes the value to take care of any space, semi-colons, or commas which cookies don't like. We will 'unescape' the value when retrieving the cookies.

The 'expdate' says when the cookie will expire, when it can be deleted from the users computer. The expiration date is stored in milliseconds, and it is optional, if not used the cookie will expire when the user exits Netscape.

Putting together a setCookie function is quite easy with this, here is a basic setCookie function:

<SCRIPT LANGUAGE="JavaScript">
function setCookie(name, value, days) {
var dc = document.cookie;
if (!days) days = 1; // default to 1 day if empty

var expdate = new Date();
expdate.setTime(expdate.getTime() + days*24*60*60*1000);

dc = name + "=" + escape(value) +
"; expires=" + expdate.toGMTString();
}
</SCRIPT>

I set the variable "dc = document.cookie", so I could use just "dc" as a shortcut, instead of typing in "document.cookie" each time.

Which can now be called from any JavaScript or Action, such as:

<FORM>
<INPUT TYPE=button VALUE="Set A Cookie" onClick="setCookie('my_cookie','it is crunchy', 30)">
</FORM>
Note the INPUT tag is one line

Which sets a cookie called 'my_cookie' with the value 'it is crunchy' which will expire in 30 days. Press the following button and it should do exactly that:


Retrieving Cookie Info.

The code to retrieve a cookie is a little more complicated, because you have to scroll through all cookies to find yours. (Sounds like a perfect spot to use Java or Perl hashtables, but oh well) Here is the getCookie function code:

<SCRIPT LANGUAGE="JavaScript">

function getCookie (name) {
var dc = document.cookie;
var cname = name + "=";
var clen = dc.length;
var cbegin = 0;

while (cbegin < clen) {
var vbegin = cbegin + cname.length;

if (dc.substring(cbegin, vbegin) == cname) {
var vend = dc.indexOf (";", vbegin);
if (vend == -1) vend = clen;

return unescape(dc.substring(vbegin, vend));
}

cbegin = dc.indexOf(" ", cbegin) + 1;

if (cbegin== 0) break;
}
return null;
}
</SCRIPT>

Here is a quick example to retrieve the cookie info we set in the first cookie, and place it in a text box:

<FORM>
<INPUT TYPE=button VALUE="Get Cookie Info" onClick="this.form.tf.value = getCookie('my_cookie')">
<INPUT TYPE=text NAME="tf" SIZE=10>
</FORM>

 

One last thing, to remove or delete a cookie, set its expiration date to now, or in my examples set day to 0.

There you have it. This wasn't the most spectacle example of using a cookie, but that is your job to come up with new and innovative ways of using the cookies. This is just to get you started. Have fun with it.

 

 

Related Links: