Crispy JavaScript Cookies: A Name Tracker

A Name Tracker

Adobe's Flash 10.1 Goes Mobile (Minus iPhone)

Once again, you'll need to copy the cookie function script from the previous section and paste it in the <HEAD>...</HEAD> portion of your HTML document. The following script asks the user for his or her name, and "remembers" the input. It then welcomes the user each time he or she accesses the page, without asking again for the name. It is useful to provide a button, or another mechanism, to let the user change the name (in case several people are using the same machine, or in case the user has mistyped his or her name).

<SCRIPT LANGUAGE="JavaScript">
<!--

// create an instance of the Date object
var now = new Date();
// fix the bug in Navigator 2.0, Macintosh
fixDate(now);
/*
cookie expires in one year (actually, 365 days)
365 days in a year
24 hours in a day
60 minutes in an hour
60 seconds in a minute
1000 milliseconds in a second
*/
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
var username = getCookie("username");
// if the cookie wasn't found, ask for the name
if (!username) {
  username = prompt("Please enter your name:", "");
}
// set the new cookie
setCookie("username", username, now);
if (username) {
  document.write("Welcome to this page, " + username + ".");
  setCookie("username", username, now);
} else
  document.write("You refused to enter your name.");

// -->
</SCRIPT>

Note that this script can be placed anywhere on the page. It welcomes the user by printing some text where you placed the script.

Use the following buttons to play around with the cookie:

Here's the code for these buttons, and the corresponding script:

<SCRIPT LANGUAGE="JavaScript">
<!--

function changeName() {
  var now = new Date();
  fixDate(now);
  now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
  username = prompt("Please enter your name:", "");
  setCookie("username", username, now);
}

// -->
</SCRIPT>

<FORM>
<INPUT TYPE="button" VALUE="delete name" onClick="deleteCookie('username')">
<INPUT TYPE="button" VALUE="change name" onClick="changeName()">
</FORM>

Play around with the preceding buttons, while trying various options. Be sure to reload the page to see the name updated.