1. Computing

Writing Cookies

Join the Discussion

Questions? Comments?

More About Cookies

Reading Cookies Deleting Cookies

One way of passing information between web pages is by writing the information to be passed into a cookie and then reading that cookie back in from the page you are passing the information to. Let's begin our look at how to pass information between pages using cookies by looking at how we go about writing a cookie.

There can be up to four fields in each cookie. The first field can be named whatever we like and will contain the actual value that we want to pass. The other three fields define the scope of the cookie. Let's look at these one at a time.

document.cookie = 'user_name=' + user_name;

This code writes our first cookie. The cookie is identified as containing a user_name and the value being passed is what follows the equals sign within the cookie content. This code creates what is known as a session cookie because the cookie is not actually written out to the hard disk. Instead the cookie value is stored within the browser itself and will continue to exist until such time as the browser is closed. To allow the value in our cookie to be retained between browser sessions we need to use the first of the three optional fields.

document.cookie = 'user_name=' + user_name + ',expires=' + expirydate.toGMTString();

We now have a date object called expirydate which we need to create and set to the date and time that we want our cookie to expire. The cookie will now be ssaved to the hard drive and subject to the limits on how many cookies can be stored per domain and how many cookies can be stored in total (and any cleanup of cookies that the computer owner may run) the cookie may continue to exist and be readable until that time.

The one limitation that we still have with our cookie is that it will only be able to be read from other pages in the same folder as the page from which we are writing it or from pages in folders that are contained within that folder. If we are actually within a folder of our site when we write the cookie then other pages on our site outside of that folder wont be able to read the cookie. We can get around this by using the second of the optional values for our cookie.

.
document.cookie = 'user_name=' + user_name + ',path=/';

It now doesn't matter where in our site we set the cookie relative to where we want to be able to read it because we have set the path to start at the top of our site. This means that it no longer matters which folders the pages writing and reading the cookie are in because the cookie is available to all pages contained within the root folder of the site or within a folder contained within the root folder which includes all of the pages within our domain.

So now we can read and write cookies from anywhere provided that they are in exactly the same domain. If we use sub-domains on our site we may have a need to write a cookie from one sub-domain that we need to be able to read from other subdomains within our domain. This is where the last of the three optional fields comes in as we can use it to specify our domain name and thus make the cookie available to all sub-domains.

document.cookie = 'user_name=' + user_name + ',path=/;domain=about.com';

Using this combination of options to write the cookie it is now available to be read from anywhere across the entire domain and not just the sub-domain where it was written and so a cookie written from a page on javascript.about.com can easily be read by a page on webdesign.about.com.

Note that this doesn't allow you to specify a value that makes your cookies available from anywhere outside of your domain because the web pages still need to be hosted on the same web server in order for the cookie to be accessible. Setting domain=com will not allow the cookie to be accessed from other sites.

We can make it easier to write cookies if we set up function to do it for us. Since two of the optional fields just make the cookkie more accessible to pages on our site wwe'll just set those values all the time to save our having to remember what the relationship is between the page writing the cookie and the one where we intend to read it.

function writeCookie(cname, cvalue, cexpire) {
document.cookie = cname + '=' + escape(cvalue) +
(typeof cexpire == 'date' ? 'expires=' + cexpire.toGMTString() : '') +
',path=/;domain=about.com';
}

We can now write cookies quite easily just by passing the name of the field and the value that it is to have in the first two parameters. If we pass a date object as the third parameter then the cookie will be saved to disk until that date or if we leave out the third parameter we will be creating a session cookie.

Note that we run the value through the escape function in order to ensure that any = and ; in the value will not confuse the cookie as to where the value field ends.

Note that you should give each cookie a different name as we'll need that to read the cookie back in again.

©2014 About.com. All rights reserved.