Overview

Appending to cookies as in our previous lesson has its limitations. The biggest is that a strict order of data must usually be followed to easily parse the needed values from the overall cookie data. Using multiple cookies helps us to better find specific cookie data in a complex cookie.

It's also difficult to edit the old data on a cookie with a lot of appended data. The viewer can too easily add too much data as it's difficult to remove specific data without just killing the whole cookie and starting over. If we put data on separate cookies, we can just kill the cookie involved.

There is also the 4KB maximum size a cookie can have. This is usually more than enough room for most applications, but you can extend this dramatically because you can set up to 20 cookies per domain. That's a total of 80KB of data in cookies.

The biggest advantage of using multiple cookies, however, is in easier data location and editing.

Setting Multiple Cookies

Setting multiple cookies couldn't be easier. You just give each cookie a different name:

document.cookie = "first_cookie=" + escape("some_data");

document.cookie = "second_cookie=" + escape("some_more_data");

That's all there is to it. Just use different names when assigning your name=value pairs. Make sure you keep up with all of your cookie names. They will be important when you search for your data later - or you want to kill them.

Here's the example we'll be making in this lesson. The viewer creates two values and they are put on separate cookies. I threw in a suprise cookie, too. Here's the code that actually sets the cookies. Note the difference in the cookies' names.

document.cookie = "cookie1=" + escape(viewer_name);

document.cookie = "cookie2=" + escape(viewer_music);

document.cookie = "cookie3=" + escape("Suprise!");

Reading Multiple Cookies

On the second page of the example, you see what happens when a "document.cookie" reads multiple cookies. The example displays "document.cookie" with:

document.write(unescape(document.cookie));

All of the name=value pairs are read. Each of these name=value pairs are separated by a semi-colon (;). The semi-colons are added automatically, you don't have to code them. The cookies are read from oldest to newest.

From this overall string of name=value pairs, you can use a variety of text parsing techniques to locate needed data. We'll be discussing some of these techniques in the next tutorial. It's important to note, though, that you have the advantage of knowing what the cookie names are. You set them. These names can help you quickly track down the data assigned to them regardless of the order in which the cookies were set by the viewer. This is an advantage over the appended cookie of the previous lesson.

Another point to understand is that each cookie still has its individual attributes, if any, like "expires=". These cookie attributes just don't show up in the "document.cookie" string. Each cookie can be given its own individual attributes when the cookie is set.

You can use the cookie killing links to see what happens when one cookie expires before the others. The name=value pair of that cookie just disappears.

Advanced Cookie Killing

You can kill multiple cookies two ways. One at a time or in groups up to all of them. The key is in remembering the names you assigned your cookies.

Killing cookies is nothing more than overwriting their "expires=" date with any date from the past. You can make a past Date() object like this:

var kill_date = new Date("January 1, 1970");

You can format this to Greenwich Mean Time (GMT) using "toGMTString()":

var kill_date = new Date("January 1, 1970");

kill_date = kill_date.toGMTString();

Now you can use "kill_date" to kill a cookie by setting it as the "expires=" date:

doucment.cookie = "[cookie name]=stub;expires=" + kill_date;

What is important in the above is in using the correct cookie name for the cookie you want to kill. It doesn't matter what value you assign to the cookie name. I used "stub". The cookie is going to be deleted as soon as it's written.

You can kill all of your cookies at once by putting their names in an array and then using a FOR loop to cycle through the array and set the "expires=" to a date in the past. Here's the code I used on the second page of the example:

function nuke_cookies(){

var cookies = new Array();
cookies[0] = "cookie1";
cookies[1] = "cookie2";
cookies[2] = "cookie3";
for (i = 0; i < cookies.length; i++){

document.cookie = cookies[i] + "=stub;expires=" + kill_date.toGMTString();

I'd made a global "kill_date" outside the function. Just make an array of your cookie names. Then use FOR to loop through the array of names and set a kill date on each cookie.

Summary & Exercises

Multiple cookies have an advantage over appended cookies in that the value is paired with a unique name. This helps you find the data regardless of the order of data when reading "document.cookie". Using multiple cookies can also help you get around a cookie's 4 KB size limit. You can use up to 20 cookies per domain (site).

The most important key to writing multiple cookies is to give them different names in the name=value pairs. This is what differentiates one cookie from another. Keep up with your cookies' names.

When "document.cookie" encounters multiple readable cookies, it reads them all. Each cookie is read as a name=value pair separated by semi-colons (;). Each cookie can have its own "expires=" date and other attributes. Only the name=value pairs are read as text data.

You kill a cookie by using a given cookie's name and setting its "expires=" date to sometime in the past. You can kill multiple cookies by making an array of their names and using a FOR loop to set a "kill date" for each.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index