Deleting Cookies

To delete a cookie, all that is required is to set it with an expiry date before the current day. The browser infers that the cookie has already expired and deletes it.

function deleteCookie(name) {
createCookie(name,"",-1);
}

Some versions of some browsers maintain the cookie until you restart your browser even if you have deleted it in the script. If your program depends on the deletion definitely having happened, do another getCookie test on the deleted cookie to make sure it has really gone.

Try it Yourself: Using Cookies

Let’s put together all you’ve learned so far about cookies by building some pages to test cookie operation.

First, collect the functions createCookie(), getCookie(), and deleteCookie() into a single JavaScript file and save it as cookie.js, using the code below

function createCookie(name, value, days, path, domain, secure) {
if (days) {
var date = new Date();
date.setTime( date.getTime() + (days*24*60*60*1000));
var expires = date.toGMTString();
}
else var expires = "";
cookieString = name + "=" + escape (value);
if (expires) cookieString += "; expires=" + expires;
if (path) cookieString += "; path=" + escape (path);
if (domain) cookieString += "; domain=" + escape (domain);
if (secure) cookieString += "; secure";
document.cookie = cookieString;
}
function getCookie(name) {
var nameEquals = name + "=";
var crumbs = document.cookie.split(';');
for (var i = 0; i < crumbs.length; i++) {
var crumb = crumbs[i].trim();
if (crumb.indexOf(nameEquals) == 0) {
return unescape(crumb.substring(nameEquals.length,
crumb.length));
}
}
return null;
}
function deleteCookie(name) {
createCookie(name,"",-1);
}

This file will be included in the <head> of your test pages so that the three functions are available for use by your code.

The code for the first test page, cookietest.html, is listed in first code, and that for a second test page, cookietest2.html, in second code. Create both of these pages in your text editor.

cookietest.html

<!DOCTYPE html>
<html>
<head>
<title>Cookie Testing</title>
<script src="cookies.js"></script>
<script>
window.onload = function() {
var cookievalue = prompt("Cookie Value:");
createCookie("myCookieData", cookievalue);
}
</script>
</head>
<body>
<a href="cookietest2.html">Go to Cookie Test Page 2</a>
</body>
</html>

cookietest2.html

<!DOCTYPE html>
<html>
<head>
<title>Cookie Testing</title>
<script src="cookies.js"></script>
<script>
window.onload = function() {
document.getElementById("output").innerHTML = "Your cookie
value: " + getCookie("myCookieData");
}
</script>
</head>
<body>
<a href="cookietest.html">Back to Cookie Test Page 1</a><br/>
<div id="output"></div>
</body>
</html>

The only visible page content in cookietest.html is a link to the second page cookietest2.html. However, the window.onload event is captured by the code on the page and used to execute a function that launches a prompt() dialog as soon as the page has finished loading. The dialog asks you for a value to be saved to your cookie, and then calls createCookie() to set a cookie of name myCookieData with the value that you just entered.

The page cookietest.html is shown working in this snapshot

After setting your cookie, use the link to navigate to cookietest2.html. When this page loads, the window.onload event handler executes a function that retrieves the stored cookie value using getCookie() and writes it to the page, as shown in this snapshot

To try it out for yourself, you need to upload the files cookietest.html, cookietest2.html, and cookies.js to a web server on the Internet (or one on your local network, if you have one) as browser security will probably prevent you from setting cookies when using the file:// protocol to view a file on your own computer.

PRV MENU NEXT

Deleting Cookies

Try it Yourself: Using Cookies

Latest Post