JavaScript tutorial - Using cookies


Skip navigation.

Site search

Site navigation

JavaScript tutorial


Other tutorials

Using cookies

Cookies are variables that can be stored on a user's computer and be picked up by any other web pages in the correct domain and path. Cookies are set to expire after a certain length of time. They are limited to storing string values only.

Be warned that many users (including me) will not permit cookies on their computers. Do not make your web sites rely on them. The reason for this is that many web sites only use cookies as part of advert tracing systems, which they use to track your movement around the Internet. I would not want anyone to follow me around a city while I was shopping, taking notes of every shop I visit and whether I look in the lingerie section, as that would be an invasion of my privacy. Many people feel the same applies to the Internet. You may find it helps to firstly display a message saying what you are going to use the cookie for, for example to store a username and password for the next time they visit the site.

Note also that European law requires sites to gain explicit permission before using cookies, unless those cookies are essential to the operation of the site (such as a shopping basket).

Some browsers will have a limit to how many cookies they can store, usually 300 cookies or more, of which there may be 20 cookies per domain name. A total of 4 KB (after encoding) of cookies can be stored for any domain or path.

The document.cookie object is a string representation of all cookies available to the current web page. The document.cookie object is somewhat unusual in that when you assign string values to it, it does not become the value that you assign to it. Instead, it takes a part of that value and appends its current value to that, so making a string containing several pairs of variableName=variableValue.

Creating / modifying and deleting cookies

I have also written a cookie script to handle all of this for you.

Cookies are created or modified by assigning a name=value pair to the document.cookie object:

document.cookie = cookieString;

The cookieString is more than just a single value. As well as a value, it can contain other information, such as when you want the cookie to expire, and what file paths it should apply to. Any of these values that you want to specify should be put together in a string as keyword=value;keyword=value;etc. and assigned as a single string to document.cookie. Only the cookie name and value are required, all other values are optional. The format of a complete cookie string is:


This is an example of how to set a cookie called mycookie, and assigning it a value of hello, with an expiry date of 17 December 2010, at 10:00 in the morning:

document.cookie = 'mycookie=hello;expires=Fri, 17 Dec 2010 10:00:00 GMT';
cookieName and cookieValue
These are strings, and must be URL encoded. They and can contain any characters. To URL encode a cookie name or value, you can use the escape method. Unfortunately, this cannot cope with unicode characters. Newer browsers will also provide the encodeURIComponent method that is able to cope with unicode, but if you use this, you will lose support for older browsers.
This must be written in full. The Date.toGMTString() method can return dates in the correct format for you. For example:
var theDate = new Date();
var oneYearLater = new Date( theDate.getTime() + 31536000000 );
var expiryDate = oneYearLater.toGMTString();
Once the specified date is reached, the cookie expires and is deleted. If expires is not specified, the cookie will be deleted when the browser is closed. If expires is set to a date in the past, the cookie is deleted immediately. This is how to delete a cookie (some browsers may take a few seconds to actually delete the cookie). In theory, computers should be able to accept any future date but in reality, UNIX computers will not currently accept a date after 03:14 on 18 Jan 2038 and many Macintosh computers will not currently accept a date after 06:28 6 Feb 2040 or the same date as that for UNIX. These are the UNIX and Macintosh equivalent of the millennium bug.
This gives the path or directories that the cookie should be accessible from. The default is the current path. Alter this using '../' (up one directory), '/' starting at the base directory and 'subdirectoryName/' to start from the 'currentDirectory/subdirectoryName/'. NOTE, if two cookies are set with the same name but different paths, both cookies will be permitted. If the script is in a directory where both those paths are satisfied, both cookies are available, and may be returned in any order. There is no way to distinguish between them. This can make scripts difficult to write so be careful!
gives the domain that the cookie is accessible from. The default is the current domain. The rules reguarding what may be put here were originally written very strictly. Domain names ending in com, edu, net, org, gov, mil, and int must contain at least 2 '.' characters (eg. Any other domain names must contain at least 3 '.' characters (eg. The domain should only be the current domain or a subdomain of it. Many browsers will now accept any valid domain name.
Having this written means the cookie is only accessible on sites with a secure (https) connection.

Reading cookies

When document.cookie is used to retrieve cookies, they are returned in the following format:

cookieName4=value; cookieName3=value; cookieName2=value; cookieName1=value

Note that the final variable value does not end with a semicolon. If there is no value for a variable, some browsers will give 'cookieName=' but some will only give 'cookieName'. Cookies are only available through the document.cookie object and cannot be accessed by simply typing their name (unless you retrieve the cookie and define that as a variable yourself).

When trying to retrieve values from this string, it is important to ensure that you do not mistake cookies for each other. For example, when searching for 'myname' it is important that you do not find a cookie called 'notmyname' or 'mynamehere'. There are many scripts that get this wrong, but the algorithm I will show you below does not make these mistakes.

The simple way to do this is to use the split method, to split on the cookie separation value '; ' (including the space). This will return an array of strings, each of which represents a name=value pair. You can then use a 'for' loop to cycle through all the array cells, splitting each of them on the '=' string. This returns an array containing one or two cells. The first will be the cookie name, and the second (if it exists) will be the cookie value.

Use either the unescape or decodeURIComponent methods to decode the contents of the first cell, containing the cookie name. If that matches the desired name, then you have found the correct cookie. Use if(!arrayname[1]) to check if the second cell has a value. If not, the cookie's value is an empty string. If it does have a value, then you can decode it to work out what it is. You can then break out of the 'for' loop.

If you reach the end of the first array without discovering the required cookie, then the cookie does not exist.

Last modified: 11 May 2011

  1. Previous
  2. Next
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.