Working with Cookies

Cookies allow the browser to save the current state as name=value pairs. Each server and domain can set only up to 20 cookies on a user's machine. The total number of cookies per installed browser cannot exceed 300, and a cookie cannot be larger than 4 Kb in size.

Creating a cookie

To create a cookie you can use the document.cookie method to set up its attributes.

Name attribute

Both name and the value have to be URI encoded, so the syntax to set a name=value pair of a cookie is

document.cookie = encodeURI("name=" + "value");

Example:

document.cookie = encodeURI("first_name=" + "Sergei");

Expires attribute

A cookie will only exist during the current browser session unless the expires attribute is specified. The syntax for setting this attribute is

expires=date

where the date has to be in the Coordinated Universal Time (UTC) format as follows:

Weekday Mon DD HH:MM:SS TimeZone YYYY

Example:

Mon Dec 27 14:15:16 PST 2003

The date in the required format can be computed by using the encodeURI() and toUTCString() functions as it is shown in the next example. The cookie in this example expires in a year from the date of its creation:

Example:

var expiresDate = new Date();
expiresDate.setFullYear(expiresDate.getFullYear() + 1);
document.cookie = encodeURI("expires=" + expiresDate.toUTCString());

Path and domain attributes

By default, a cookie will be only accessible by the Web page located in the directory containing the script that creates the cookie. This can be modified by providing the path and domain attributes to allow also all pages located at the specified path and below, and also to all Web pages in the specified domain, to access it.

Example:

document.cookie("path=/myPath");
document.cookie("domain=.uwsuper.edu");

Secure attribute

Setting this attribute will force the browser to transmit the cookie by using the HTTPS or other security protocol.

document.cookie("secure=true");

Deleting a cookie

To delete a cookie, you should re-setup its name and set an arbitrary value to the cookie property and set its expiration date somewhere in the past.

Example:

var expiresDate = new Date();
expiresDate.setFullYear(expiresDate.getFullYear() - 1);
document.cookie = encodeURI("first_name=delete");
document.cookie = encodeURI("expires=" + expiresDate.toUTCString());

Reading a cookie

The cookie for a particular Web page is available as the cookie property of the document object. The value of this property is a single string containing all URI encoded cookie fields separated by the "; " string (a semicolon followed by a space).

A cookie must be first decoded by using the decodeURI() method. Next, use the split function to the name=value pairs into an array for further processing.

Example:

document.cookie = encodeURI("city=Boston");
document.cookie = encodeURI("team=Red Sox");
document.cookie = encodeURI("sport=baseball");
var cookieString = decodeURI(document.cookie);
var cookieArray = cookieString.split("; ");