Menu form: Favorite drink

  1. Today’s special
  2. Menu form

Everybody likes it when the bartender remembers their drink from last time. Let’s make our form remember it, too. Remembering things from past visits requires cookies. Cookies are bits of data stored on the client’s computer. The browser sends all of the cookies relevant to your page, every time it loads the page.

Cookies need a name, an expiration date, and a path. You’ll use the name to access the cookie’s value later. The browser will throw out the cookie when the expiration date passes. And the browser will use the path to choose which cookies to send your page. We’re going to send it a path of “/” so that all pages on our site (which, for testing purposes, is most likely your local hard drive) will get the cookie we set.

//set a cookie that will expire in 14 days

//and is valid on the entire site

function setCookie(cookieName, cookieValue) {

//get the current time

var expirationDate = new Date();

//add ten days by converting to milliseconds

expirationDate = expirationDate.valueOf() + 14*24*60*60*1000;

//turn the milliseconds back into a date

expirationDate = new Date(expirationDate);

//create cookie string; it needs an expiration date and a path

var expires = "; expires=" + expirationDate.toGMTString();

var path = "; path=/";

var theCookie = cookieName + "=" + escape(cookieValue) + path + expires;

document.cookie = theCookie;

}

Save this and reload the page, and you now have a way to set cookies through JavaScript.

javascript:setCookie("faveDrink", "Harvey Wallbanger");

Your browser should have a way of looking at cookies. In Safari, go into the security preferences pane to “Show Cookies”, and search on “filecookies” to see all local cookies. In Firefox, go to the privacy pane to show cookies, and search on the cookie’s name—in this case, “faveDrink”. You should find the cookie and be able to see that it’s value is “Harvey Wallbanger”.

We also need a function to retrieve the cookie and its value.

//get a cookie's value if it exists

function getCookie(cookieName) {

//get a list of all cookies

var allCookies = document.cookie;

if (allCookies) {

//if there are multiple cookies, they're separated by semicolons

allCookies = allCookies.split("; ");

for (var cookie=0;cookie<allCookies.length;cookie++) {

//cookies have the format name=value, so split on the equal sign

var cookieParts = allCookies[cookie].split("=");

if (cookieParts[0] == cookieName) {

return unescape(cookieParts[1]);

}

}

}

return false;

}

This function lets us retrieve a cookie’s value. Try it in your browser’s URL bar:

javascript:window.alert(getCookie("faveDrink"));

The next step is to remember it. The best place to do this is in verifyOrder, since that happens on submit. Right above the line that says “return true”, add code to set the cookie if the customer has chosen a drink:

var drink = radioValue(form, "drinks");

if (drink) {

setCookie("faveDrink", drink);

}

return true;

Try choosing some drinks, submitting the form, and then checking the value of faveDrink:

javascript:window.alert(getCookie("faveDrink"));

Now we’re pretty much done. We need a function to set the drinks radio button, and we need to call it when the window loads.

function rememberDrink() {

var drink = getCookie('faveDrink');

if (drink) {

markSpecial('drinks', drink);

}

}

window.onload=rememberDrink;

That’s it! The menu form should now remember the last submitted drink selection whenever the page loads.

Create a known date

So far, we’ve used the Date object to get the current date and time. But we can also pass the Date class a number of milliseconds to have it create the date and time represented by those milliseconds.

Greenwich Mean Time

So far, the only thing we’ve used Date objects for is for comparison purposes, and we’ve used the valueOf method for that. Another very useful method is toGMTString. The Internet is built on reliable timestamps, and toGMTString provides a standard format for specifying the date and time in a universal format (in Greenwich Mean Time).

escape and unescape

Cookies are stored as part of the HTTP headers. These headers are a lot like the headers that you see in your e-mail, and there are special rules that need to be followed for some special characters. The “escape” function in JavaScript ensures that those characters are “safe” by encoding them with a percentage sign and a number corresponding to the special character. Some special characters include the equal sign and the semicolon. Without escaping the value, extraneous equals and semicolons would mess up the retrieval of cookies.

The opposite of escape is unescape, and you can see that in getCookie we unescape the value that we earlier escaped.

Split a string

The opposite of joining an array is splitting a string. In getCookie, we split the list of cookies, because they’re separated by semicolons and spaces, and we split each cookie on the equal sign, because the cookies are listed as “name=value”. Splitting on the equal sign gives us an array of the cookie’s name as the first item and its value as the second.

  1. Today’s special
  2. Menu form