1,cookieDemo.htm.

JAVASCRIPTING
C is for cookie!
Steven W. Disbrow
Listing 1. cookieDemo.htm.


<html>
<head>
<title>JavaScripting - Working with Cookies</title>
<script language="javascript">
var message = "Welcome to my web page!";
var cookieName = "myCookie";
var saveDays = 7;

/*
 This function loads the info from our cookie and
 loads it into our form
*/
function loadCookie( f) {
  var theCookie = "";

  // load the cookie from the client machine
  theCookie = document.cookie;

  // if theCookie is empty, it means either that
  // the user has not visited the page before, or
  // that cookies have been turned off
  if (theCookie != "") {
    // First, determine if this is our cookie
    cArray = theCookie.split( "=");
    if (cArray[ 0] != cookieName) {
      message = "A cookie was found, but not the one we were looking for!"
      }
    else {
      message = "Welcome Back!"
      // If it is, pull the cookie apart!
      crumbs = cArray[ 1].split( "|")
      for (x = 0; x < crumbs.length; x++) {
        // Load each crumb's data into the proper field 
        fieldData = crumbs[ x].split( ":");
        theCommand = "f." + fieldData[ 0] + ".value = '" + unescape( fieldData[ 1]) + "'";
        eval( theCommand);
          }
      }
    }
  window.defaultStatus = message;
  }

/*
 This function saves our information in a cookie
*/
function saveCookie( f) {
  fn = f.fn.value;
  age = f.age.value;
  bd = f.bd.value;
  cookieStr = cookieName + "="
  cookieStr += "fn:" + escape( fn)
  cookieStr += "|age:" + escape( age)
  cookieStr += "|bd:" + escape( bd) + ";"

  // Set an expiration date
  var expireDate = new Date();

  // How many milliseconds in saveDay days?
  var expireDays = 1000 * 60 * 60 * 24 * saveDays;

  // Change the date to reflect seven days from now
  // expireDate.setTime( expireDate.getTime() + expireDays);

  // Now, add the 'expires=' part to our cookie string 
  // cookie Str += "expires=" + expireDate.toGMTString() + ";";

  // Save the cookie to the client machine
  document.cookie = cookieStr;
  }

/* 
This function effectively removes a cookie by clearing its expiration
*/
function removeCookie() {
  // Ensure that saveCookie() writes out a pre-expired date!
  saveDays = 0;
  // Now save the cookie with no expiration ...
  document.cookie += ";expires=;"
  }
</script>
</head>

<body bgcolor="white" onLoad="loadCookie( document.f)" onUnLoad="saveCookie( document.f)">
<script language="javascript">
if (message != "")
  window.defaultStatus = message;
</script>
<form name="f" id="f">
Enter Your First Name: <input type="text" id="fn" name="fn"/>      <br/>
Enter Your Age: <input type="text" id="age" name="age"><br/>
Enter Your Birthdate: <input type="text" id="bd" name="bd"/>    <br/>

<input type="button" value="Load Cookie" onClick="loadCookie( this.form)" />
<input type="button" value="Save Cookie" onClick="saveDays=7;saveCookie( this.form)" /><br/>
<input type="button" value="Show Cookie" onClick="alert( document.cookie)" />
<input type="button" value="Delete Cookie" onClick="removeCookie()" /><br />
<input type="reset" value="Clear Fields" />
</form>
</body>
</html>

About the Author

Steven Disbrow is the owner of EGO Systems, a computer consulting firm in Chattanooga, TN. He can be contacted at [email protected].

Most   Popular