Self-Modifying Pages That Respond to Cookie Data

Here's another cookie example. This time, you'll see two different pages depending on whether a cookie was set. The page will modify itself to ask the user for his name if the cookie was not set, and will display a welcome message using his name if the cookie containing that name was set.

Here's how it works. We'll start by checking whether the cookie, which I'll call name1 , is set, and if so, write a welcoming message to our web page using that name:

 var cookieData = new String(document.cookie)  var cookieHeader = "name1="  var cookieStart = cookieData.indexOf(cookieHeader) + cookieHeader.length  var cookieEnd = cookieData.indexOf(";", cookieStart)  if(cookieEnd == -1 ) {      cookieEnd = cookieData.length  }  if (cookieData.indexOf(cookieHeader) != -1){      var name = cookieData.substring(cookieStart, cookieEnd)      document.write("<BR><H1>Welcome " + name + "!</H1>")  }          .          .          .

On the other hand, if the cookie does not exist, we'll display a page inviting the user to set the cookie by showing a prompt, a text field in which to enter his name, and a button:

 if (cookieData.indexOf(cookieHeader) != -1){      var name = cookieData.substring(cookieStart, cookieEnd)      document.write("<BR><H1>Welcome " + name + "!</H1>")  }  else{   document.write("<BR>")   document.write("<H1>")   document.write("Enter your name and click the button.")   document.write("</H1>")   document.write("<BR>")   document.write("<FORM NAME='form1'>")   document.write("<INPUT TYPE='TEXT' NAME='text1' SIZE='40'>")   document.write("<BR><BR>")   document.write("<INPUT TYPE='BUTTON' VALUE='Store Name' ONCLICK='setCookie()'>")   document.write("</FORM>")   }

When the user enters his name and clicks the button, the setCookie function is called, and we just set a temporary cookie that will expire in one day, using the name name1 :

 function setCookie()  {      var then = new Date()      then.setTime(then.getTime() + 24 * 60 * 60 * 1000)      document.cookie = "name1=" + document.form1.text1.value + ";expires="      + then.toGMTString()      alert("The cookie was set!")  }

Here's the whole code for this page, which modifies itself depending on whether a cookie was set:

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

 <HTML>      <HEAD>          <TITLE>Self-Modifying Pages That Respond to Cookies</TITLE>      </HEAD>      <BODY>          <SCRIPT LANGUAGE="JavaScript">              <!--                 var cookieData = new String(document.cookie)                  var cookieHeader = "name1="                  var cookieStart = cookieData.indexOf(cookieHeader) + cookieHeader.length                  var cookieEnd = cookieData.indexOf(";", cookieStart)                  if(cookieEnd == -1 ) {                      cookieEnd = cookieData.length                  }                  if (cookieData.indexOf(cookieHeader) != -1){                      var name = cookieData.substring(cookieStart, cookieEnd)                      document.write("<BR><H1>Welcome " + name + "!</H1>")                  }                  else{                      document.write("<BR>")                      document.write("<H1>")                      document.write("Enter your name and click the button.")                      document.write("</H1>")                      document.write("<BR>")                      document.write("<FORM NAME='form1'>")                      document.write("<INPUT TYPE='TEXT' NAME='text1' SIZE='40'>")                      document.write("<BR><BR>")                      document.write("<INPUT TYPE='BUTTON' VALUE='Store Name'  ONCLICK='setCookie()'>")                      document.write("</FORM>")                  }                  function setCookie()                  {                      var then = new Date()                      then.setTime(then.getTime() + 24 * 60 * 60 * 1000)                      document.cookie = "name1=" + document.form1.text1.value + ";expires="                      + then.toGMTString()                      alert("The cookie was set!")                  }              //-->          </SCRIPT>      </BODY>  </HTML>

You can see the results in Figure 23.4 when you first load the page. In that figure, you can see the code asking for a name to store. When I store my name and reload the page at a later time (up until the cookie expires), the page displays a welcoming message using my name, as you see in Figure 23.5.

Figure 23.4. Setting a cookie in a self-modifying page.

graphics/23fig04.gif

Figure 23.5. Modifying a page based on cookie content.

graphics/23fig05.gif

That's it for our work on cookies in this chapter. As you can see, it's not difficult in theory; you just add data pairs to a cookie string, and that cookie string is made available to you later in the document.cookie property each time that page is loaded again and the cookie is still available. Keep in mind that not all users tolerate cookies, and may even have to browser set not to accept them, in which case you should offer an alternative, such as storing data in hidden HTML fields.