Previous Page
Next Page

Deleting Cookies

At some point, you're going to want to delete a cookie or many cookies in a cookie record. It's fairly easy to do; one technique that works well is to simply set the cookie's expiration date to a date in the past, which causes the browser to delete it automatically. Script 10.7 shows how to force your cookies to become stale.

Script 10.7. This script deletes cookies.

[View full width]
window.onload = cookieDelete;

function cookieDelete() {
     var cookieCt = 0;

     if (document.cookie != "" && confirm ("Do you want to delete the cookies?")) {
        var thisCookie = document.cookie.split ("; ");
        cookieCt = thisCookie.length;

        var expireDate = new Date();
        expireDate.setDate(expireDate. getDate()-1);

        for (var i=0; i<cookieCt; i++) {
           var cookieName = thisCookie[i]. split("=")[0];
           document.cookie = cookieName + "=;expires=" + expireDate. toGMTString();
        }
     }
     document.getElementById("cookieData"). innerHTML = "Number of cookies deleted: " + 
cookieCt;
}

To delete cookies:

1. 
var cookieCt = 0;



This script is going to keep track of how many cookies we've deleted, so we start off by creating the cookieCt variable and setting it to zero.

2. 
if (document.cookie != "" && confirm("Do you want to delete the cookies?")) {



This test first checks to make sure that the cookie doesn't contain a null value, that is, there are some cookies. If the test shows that the cookie is empty, then the script will do nothing. The second part of the test tells the browser to put up a confirmation dialog with the included text (Figure 10.6). If confirm() returns true, then we know the user wants to delete their cookies. If false, then we skip down to step 9.

Figure 10.6. It's good interface design to confirm with the user whenever you are going to erase or delete anything.

[View full size image]


3. 
var thisCookie = document.cookie. split("; ");



This line splits the contents of the cookie into an array with the split("; ") method and assigns that array to the variable thisCookie.

4. 
cookieCt = thisCookie.length;



We now know how many cookies we're going to be deleting, so that's stored in cookieCt.

5. 
var expireDate = new Date();
expireDate.setDate(expireDate. getDate()-1);



Here we create a new date object, expireDate, which is then set to the current date minus 1in other words, to yesterday.

6. 
for (var i=0; i<cookieCt; i++) {



Now begin a for loop, so that we can delete all the cookies, not just one. First set the value of i to 0; then, as long as i is less than the number of cookies, increment i by 1.

7. 
var cookieName = thisCookie[i]. split("=")[0];



Use split("=")[0] to get the name of the i th cookie in the array, which is then stored in the variable cookieName.

8. 
document.cookie = cookieName + "=;expires=" + expireDate. toGMTString();



Here's where the cookie with the changed expiration date gets written back out.

9. 
document.getElementById ("cookieData").innerHTML = "Number of cookies deleted: " + cookieCt;



The script is out of the for loop now, and this line sets the number of cookies deleted in the HTML document (Figure 10.7).

Figure 10.7. Users should also get feedback that events have occurred as expected.

[View full size image]


Tip

  • In previous editions of this book, this script showed nothing at all if no cookies existed, or if the user cancelled the deletion. Setting innerHTML to a value will now show the actual number of cookies deleted in those cases (always zero) as well.



Previous Page
Next Page