Cookies

This tutorial will cover a few basic things about cookies, including setting and updating a cookie, grabbing the cookie's value, and deleting a cookie. Take note that there are a few things I won't bother mentioning, such as the extra, optional properties you can use or things like the expiration date being optional and it becoming a session cookie if left off.

To start off, we'll be covering how to set a cookie. Let's take a look at the basic syntax for one.

document.cookie = "NAMEHERE=VALUEHERE; expires=DATE";

Starting with the colors, here's a break down. (Note: All non-colored parts are just designating the end of a line, a space, or a quote.)

Blue - This is designating the fact that we're setting a cookie. The cookie is a property of the document object, so first we grab it. Then we add an equals sign saying we're setting it equal to something, but a cookie behaves differently. It actually is saying we're updating the cookie property with this specific cookie.
Red - This starts off by saying that we're about to designate the name of the cookie. The equals sign denotes the end of the cookie's name.
Orange - This is the value. Everything up until the semi-colon is the value of the cookie. If you want to use a semi-colon in the value, escape() or encodeURIComponent() it first. (Make sure to unescape() or decodeURIComponent() it when retrieving the value.)
Green - This is saying that we're about to set the expiration date of the cookie.
Purple - This is the date the cookie will expire on. For this, its easiest to use JS Date object and then call toGMTString() upon the object. You can use set time to accordingly adjust the time to what you want it to be.

Now that we have the layout for it down, let's give a few examples.

var d = new Date();
d = d.toGMTString();
d = d.replace(/\d{4}/,"2050");
document.cookie = "cookiesrock=Yes they do;expires="+d;

Taking a look at it line by line, you'll get a general idea of how this works.

var d = new Date();
We create a new date object. This is needed to get the date format we want.

d = d.toGMTString();
This takes the date object and turns it into a string, technically, a string in the GMT format and time zone.

d = d.replace(/\d{4}/,"2050");
Now we're going to replace the first match of 4 numbers in the date string with "2050". What gets replaced is the year actually, so we're setting this cookie to expire in the year 2050.

document.cookie = "cookiesrock=Yes they do;expires="+d;
This line just creates the cookie, which you should have gotten from the break down before. You can also see where d (the date object converted) is used in the code.



Now that we've covered the basics of setting a cookie, I'm going to tell you that updating a cookie is done the exact same way. So yes, you just learned two things at once. Have fun with that. =)



Moving on, we're going to cover grabbing the value of a cookie. Let's use these cookies as an example.
1. cookiesrock=Yes they do
2. woot=Whee
3. smilies=\m/ >.< \m/

If you alert the document.cookie object, you'll get a string that looks something like this:
cookiesrock=Yes they do;woot=Whee;smilies=\m/ >.< \m/

Note that they removed the dates you might have inserted. You might think this is annoying, but in the case of grabbing data, its quite useful. If you look, you see the data is all there, but we need someway to grab it. I prefer the RegExp. method personally, so I'll be teaching that.

if(document.cookie.match(/woot=(.+?)(;|$)/)){
     var cookievalue = RegExp.$1;
}

Looking at a quick break down of that, you'll see I'm checking document.cookie to match the RegExp /woot=(.+?)(;|$)/. Then if its matched, I assign the first RegExp parenthetical match to cookievalue. This effectively just grabbed the cookie's value for you.




Moving on to deleting cookies. Deleting a cookie is as easy as setting one, literally. Set the value of the cookie to a blank (put the semi-colon following the equals sign right away), and then set the expiration date for some time in the past. =)


Now that I've covered the basics of cookies, here's some helpful little functions that you may use. They might save you a bit of time when developing your codes.


function setCookie(_name,_value){
document.cookie = _name+"="+escape(_value)+";expires="+(new Date()).toGMTString().replace(/\d{4}/,"2050");
}

function getCookie(_name){
if(document.cookie.match(new RegExp(_name+"=(.+?)($|;)","gi")))
return unescape(RegExp.$1);
return null;
}

function getCookie2(_name){
if(document.cookie.indexOf(_name) == -1)
return null;
var _c = document.cookie.substring(document.cookie.indexOf(_name));
return unescape(_c.substring(_c.indexOf("=")+1,(_c.indexOf(";") == -1?_c.length:_c.indexOf(";"))));
}

function deleteCookie(_name){
document.cookie = _name+"=;expires="+(new Date()).toGMTString().replace(/\d{4}/,"2004");
}


Last Edit: Dec 10, 2006 20:16:18 GMT by Chris