Deleting Cookies | Inside JavaScript

The browser will delete cookies when they're expired (although it might take the browsers a little time to do so). That means we can delete cookie1 just by resetting its expiration time. Here's a function, deleteCookie , which does exactly that, setting the cookie's expiration date to some time in the past:

 function deleteCookie()  {      document.cookie =          "cookie1=Here is the cookie data!;expires=Fri, 31 Dec 1999 23:00:00 GMT;"          document.form1.text1.value = ""          window.alert("Cookie will be deleted!")  }

That's all it takes. Here's how we can add this function to our cookie example:

(Listing 23-03.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Working With Cookies          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function setCookie()              {                  var cookieDate = new Date()                  cookieDate.setTime(cookieDate.getTime() + 24 * 60 * 60 *                      1000)                  document.cookie =                      "cookie1=Here is the cookie data!;expires="                      + cookieDate.toGMTString()                  alert("Cookie created!")              }              function getCookie()              {                  var cookieData = new String(document.cookie)                  var cookieHeader = "cookie1="                  var cookieStart = cookieData.indexOf(cookieHeader) + cookieHeader.length                  var cookieEnd = cookieData.indexOf(";", cookieStart)                  if(cookieEnd == -1 ) {                      cookieEnd = cookieData.length                  }                  if (cookieData.indexOf(cookieHeader) != -1){                      document.form1.text1.value =                          cookieData.substring(cookieStart, cookieEnd)                  }                  else{                      document.form1.text1.value = "Could not find the cookie."                  }              }  function deleteCookie()   {   document.cookie =   "cookie1=Here is the cookie data!;expires=Fri, 31 Dec 1999 23:00:00  GMT;"   document.form1.text1.value = ""   window.alert("Cookie will be deleted!")   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>              Working With Cookies          </H1>          <FORM NAME="form1">              <INPUT TYPE = BUTTON Value = "Create the cookie"                   ONCLICK = "setCookie()">              <BR>              <INPUT TYPE="text1" NAME="text1" SIZE="30">              <BR>              <INPUT TYPE = BUTTON Value = "Get the cookie"                  ONCLICK = "getCookie()">              <BR>  <INPUT TYPE = BUTTON Value = "Delete the cookie"   ONCLICK = "deleteCookie()">   <BR>   <INPUT TYPE = BUTTON Value = "Get the cookie"   ONCLICK = "getCookie()">  </FORM>      </BODY>  </HTML>

You can see the results in Figure 23.3. In this case, I've clicked the "Delete the cookie" button, followed by the "Get the cookie" button. As you can see in the figure, the cookie has indeed been deleted.

Figure 23.3. Deleting a cookie.

graphics/23fig03.gif

Now we've gotten a good introduction to the whole topic of working with cookies. We've seen how to set, read, and delete cookies at will. In the next section, I'll take a look at how to use cookies with self-modifying pages that read and use data stored in cookies.