ptg 710 Chapter 16 • Cookies 16.2.5 Deleting a Cookie If you want to delete a cookie for the current page, set the expiration date of the cookie to a date earlier than the current date. This will cause the cookie to be deleted when the session ends. Figure 16.11 When the user clicks the “See Cookie” button, all cookies are retrieved. Figure 16.12 After the user clicks the button, the color of the page changes based on the cookie that was sent. EXAMPLE 16.4 <html> <head><title>Delete Cookie</title><head> <script type = "text/javascript"> var i = 0; 1 function delCookie (cookieName){ 2 document.cookie = cookieName + "=" +"; expires=Thu, 01-Jan-1970 00:00:01 GMT"; alert("Cookie was deleted!"); seeCookie(); } From the Library of WoweBook.Com ptg 16.2 Creating a Cookie with JavaScript 711 3 function seeCookie(){ if(document.cookie == ""){ alert("No cookies"); return false; } else{ 4 var myCookie = document.cookie.split("; "); if ( i < myCookie.length ){ 5 document.form1.cookietype.value = myCookie[i].split("=")[0]; i++; // Increase the index value // to see the next cookie } else{alert("No more cookies");} } } </script> </head> 6 <body onLoad="seeCookie()" > <div align="center"> <h2> Got milk?</h2> 7 <form name="form1"> Is this the cookie you want to delete? <br /> <input type="text" name="cookietype" > <p> 8 <input type="radio" name="radio" value="choice" 9 onClick= "delCookie(document.form1.cookietype.value);" />Yes <input type="radio" name="radio" value="choice" 10 onClick="seeCookie();" />No </p> </form> </div> </body> </html> EXPLANATION 1 The function called delCookie() will remove a requested cookie. The name of the cookie, cookieName, is passed as a parameter to the function. Continues EXAMPLE 16.4 (CONTINUED) From the Library of WoweBook.Com ptg 712 Chapter 16 • Cookies 2 The expiration date of the cookie is set to the beginning of UNIX time, also called epoch time—January 1, 1970. Certainly this date has passed and the cookie will be deleted. After the cookie has been deleted, the seeCookie() function will be called, and the user will be presented with another cookie. If he or she clicks the Yes radio button, that cookie will be removed. 3 The function called SeeCookie() will check to see if there are any cookies remain- ing in the document.cookie property. If not, the program is over. To actually see if the cookies were deleted, close this session, and then reopen it. 4 By splitting up the document.cookie property by semicolons, an array is created consisting of a name and value attribute of the cookie. 5 The first element of the array, the name of the cookie, is assigned to the textbox represented as document.form1.cookietype.value. It will appear in the textbox for the user to see. Each time the function is called, the next cookie will be assigned to the textbox, giving the user the option to delete that cookie. 6 When the document has finished loading, the onLoad event is triggered, and calls the seeCookie() function. The first cookie name will appear in the textbox. 7 The HTML form starts here. 8 The textbox input type will be used to hold the cookie name. 9 This radio button, when clicked, will called the delCookie() function. The user wants to remove this cookie. See Figures 16.13 and 16.14. 10 This radio button, when clicked, means the user doesn’t want to delete this cookie but would like to see the next cookie. When the user clicks No, the seeCookie() function will be called. After all the cookies have been shown, the alert message will say “No more cookies.” Figure 16.13 The cookie’s name is visitor. If the user clicks Yes (top), the cookie will be removed (bottom). EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 16.2 Creating a Cookie with JavaScript 713 16.2.6 Using the Browser to Remove Cookies Another way to delete cookies is to go in your browser and select Help and search for Delete cookies. In Internet Explorer go to the Tools menu and Internet Options (see Figure 16.15). Then you can remove all or some cookies from the hard drive. Figure 16.14 The cookie has been deleted after user clicked the “Yes” button. Figure 16.15 Internet Options in Internet Explorer. From the Library of WoweBook.Com ptg 714 Chapter 16 • Cookies 16.3 What You Should Know Now you know what cookies are and why commercial sites like to use them. You should know: 1. A little about the history of the cookie. 2. How to make a cookie. 3. How to use a cookie. 4. What escaping a cookie value means. 5. When the cookie normally expires if an expiration date is not set. 6. How to delete a cookie. 7. How to delete cookies using your browser. 8. How to enable or disable cookies on your browser. 9. How JavaScript views a cookie. From the Library of WoweBook.Com ptg 16.3 What You Should Know 715 1. Create a form that contains a set of checkboxes with different types of coffees— espresso, cappuccino, mocha, and so on. Ask the user for his or her name and room number and to select a type of coffee. Tell the user you will be sending the coffee to that room number. Create a cookie to remember the user’s preference. The next time the user brings up the page, tell him or her there is a special rate for his or her (use the cookie value) favorite coffee. 2. Create a form that asks for the user’s shipping address. The next time the user brings up the page, fill in the address using a cookie value. Exercises Exercises From the Library of WoweBook.Com ptg This page intentionally left blank From the Library of WoweBook.Com . <head><title>Delete Cookie</title><head> <script type = "text /javascript& quot;> var i = 0; 1 function delCookie (cookieName){ 2 document.cookie = cookieName. deleted!"); seeCookie(); } From the Library of WoweBook.Com ptg 16.2 Creating a Cookie with JavaScript 711 3 function seeCookie(){ if(document.cookie == ""){ alert("No cookies");. (bottom). EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 16.2 Creating a Cookie with JavaScript 713 16.2.6 Using the Browser to Remove Cookies Another way to delete cookies is to go