Topics

Delete a cookie in JavaScript

Content

1 Objective
2 Scenario
3 Method
4 Variations
- 4.1 Define the scope of the cookie (path and/or domain)
5 See Also
6 Further Reading

Tested on

Firefox (3.0, 3.6, 30, 31)

Chrome (5, 34, 36)

IE (6, 7, 8, 11)

Objective

To delete a cookie from within a web page using JavaScript

Scenario

Suppose that you wish to delete a cookie named foo. It was created without an explicit path or domain attribute.

Method

Overview

The method described here has three steps:

Construct an empty cookie expressed as a name-value pair.
Specify an expiry date for the cookie that is in the past.
Assign the resulting string to document.cookie.

For example:

var cookieString = 'foo=';
var expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() - 86400 * 1000);
cookieString += ';max-age=0';
cookieString += ';expires=' + expiryDate.toUTCString();
document.cookie = cookieString;

You may also need to:

Define the scope of the cookie (path and/or domain).

Note that a cookie created via HTTP with the httponly attribute cannot be deleted using the JavaScript API.

Construct an empty cookie expressed as a name-value pair

When a cookie is created it is expressed as a name-value pair of the form <name>=<value>. The same format is needed for deletion, except that any value will suffice. The empty string is the obvious choice:

var cookieString = 'foo=';

Specify an expiry date for the cookie that is in the past

There is no explicit mechanism for deleting cookies using plain JavaScript. Instead, a new cookie should be created with the same name and scope as the one to be deleted, but with an expiry date in the past.

The preferred way to specify an expiry date is by means of the max-age attribute. Normally the argument to this attribute would be a time difference in seconds, but as a special case, an argument of zero is interpreted as the earliest date that the web browser is capable of representing.

For compatibility with Internet Explorer you may also want to append an expires attribute. (max-age takes precedence if it is present and supported.) Common practice is to subtract one day from the current date and time:

var expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() - 86400 * 1000);
cookieString += ';max-age=0';
cookieString += ';expires=' + expiryDate.toUTCString();

(Note that this would not be the best method if the deletion request were being composed remotely by a web server, because the clock on the server might be set differently to the clock on the client machine. Under those circumstances it is probably safer to use a fixed date in the distant past, such as the UNIX epoch of 1st January 1970. When deleting from JavaScript there should not be any time difference, but the time could be badly wrong. Better, therefore, to specify a relative time rather than an absolute one.)

Assign the name-value pair to document.cookie

The cookie string should now be assigned to the cookie property of the global document object in the same way that it would be to create a new cookie:

document.cookie = cookieString;

Variations

Define the scope of the cookie (path and/or domain)

The scope of a cookie consists of an optional path and domain which determine the extent to which it is visible from other web pages. To successfully delete a cookie, the scope specified in the deletion request must match that given when the cookie was created. For example, for a cookie scoped to the root of the domain example.com:

cookieString += ';path=/';
cookieString += ';domain=example.com';
document.cookie = cookieString;

Note that a given web page may be able to see several cookies with the same name but different scopes. Therefore, even if deletion is successful, you may still be able to see one or more cookies with the name that was deleted.

Topics

Rate this page

Delete a cookie in JavaScript

Content

Tested on