Creating and Using Cookies

• By Paul McFedries
• Sep 2, 2001
• Article is provided courtesy of Que

From the author of
Special Edition Using JavaScript

What Is a Cookie?

You've seen the benefits of global variables in many places so far in this book:

• Within a single page, a global variable saves coding by making the variable's value available to all the statements, functions, and scripts on that page.

• Within a frameset, global variables in the frameset page enable you to "store" values that are accessible to scripts within not only the frameset page, but also within all of the child frames.

Unfortunately, when the user navigates to a different page or frameset on your site, or when the user leaves your site and returns later, the values stored in all those global variables are lost forever. If you want to store data such as user preferences, ordering information, or user names and passwords, you need some way of creating a truly "global" variable that maintains its value across pages and across browser sessions.

The solution is to create something called a cookie. This is (depending on the browser) either a text file or a line within a designated text file. Either way, the file is saved on the user's computer, which means that the data in the cookie is available to any script on any of your pages, even if the user has shut down her system and rebooted. In JavaScript parlance, this is known as saving state.

In the simplest terms, a cookie is just a chunk of text that is stored on the user's hard disk. Where the cookie gets stored depends on the browser and on the operating system:

• The Windows 9x versions of Internet Explorer store each cookie is a separate text file in the Windows\Cookies folder. In Windows 2000 and XP, the file is in the Documents and Settings\UserName\COOKIES folder (where UserName is the current user's Windows login name). The file usually takes the name UserName@Domain.txt (where Domain is the domain name of the site that saved the cookie). On the Macintosh, Internet Explorer stores the cookies in a file named cookies in the SystemFolder:MS Preference Panels folder.

• Netscape stores each cookie as an entry in a single text file. In Windows, the file is named cookies.txt and is located in the Netscape\Users\UserName\ folder. For the Macintosh, the file is named MagicCookie and can be found in the System Folder:Preferences:Netscape Users:UserName folder. (In both cases, UserName is the current user's Netscape profile name.)

The most basic form of cookie acts similar to but is a bit different than a JavaScript variable. It consists of a name/value pair, which means that it has a name and value separated by an equals sign (=). For example, if you want to use a cookie to store a person's user name, you might use the name user_name and the value Biff. In this case, the simple cookie would look like this:

user_name=Biff

This looks a lot like a variable assignment statement in JavaScript, which is why cookies and variables are similar. However, you need to remember that the cookie is the entire name=value statement, not just the name or the value.

This simple cookie will serve you well for many uses, but, as you'll see a bit later when I show you how to set a cookie, you can also create more advanced cookies that have expiration dates and other useful features.

The other important cookie crumb that you need to bear in mind is that all cookies are site-specific. That is, your scripts can read only the cookies that have been created by pages on your site. Similarly, scripts on other sites can read only their own cookies. It isn't possible for one site to create, read, change, or delete cookies that belong to another site. In this sense, cookies are a perfectly secure mechanism for storing data.