Tutorial 9 - CookiesTutorial 8 - Multimedia - Tutorial 10 - Menuing Systems Cookies are used for information storage that can be read either by the same page on a later viewing, other HTML/JavaScript pages on the same site or by servers. Cookies are stored in a file named cookies.txt in Netscape or in the folder \System\Cookies in MSIE. Some of the many uses of cookies are: tracking visits by a specific client, remembering the last page viewed,shopping basket storage, notifying a user of any recent change to site, user profiling: login, view method, preferences, passing information from one document to another and maintaining state information longer than a session Required Ingredients for a CookieCertain ingredients are required for the correct baking of a cookie from scratch. The following sections of this page provide functions that set reasonable defaults for most applications. But these ingredients can be added as baking parameters if needed by a specialized application.
Baking a CookieBakeCookie is a generic function for creating cookies. It also illustrates how you can have a variable number of parameters for a JavaScript function. The mandatory parameters are the variable name and the value to be stored. Multiple values can be stored in the same cookie by calling the BakeCookie function several times but using a different variable name as the first parameter. This function is written so that optional parameters default to useful values, and the order is predefined as given above in cookie ingredients (ie. expiry [defaults to never], path, domain, security). MSIE stores cookies in \windows\cookies and gecko browsers store cookies in a cookies.txt file (useful debugging note!). Netscape and mozilla share the cookie.txt file in the mozilla profile. function BakeCookie(name,value) {
argv=arguments;
argc=arguments.length;
expires=(argc>2) ? argv[2] : null;
path=(argc>3) ? argv[3] : null;
domain=(argc>4) ? argv[4] : null;
secure=(argc>5) ? argv[5] : false;
document.cookie=name+"="+escape(value) +
((expires === null) ? "" : ("; expires="+expires.toUTCString())) +
((path === null) ? "" : ("; path="+path)) +
((domain === null) ? "" : ("; domain="+domain)) +
((secure === true) ? "; secure" : "");
}
Eating a CookieEatCookie is a generic function that recovers stored cookie information. The only required parameter is the variable name. The returned value is a string value or null if nothing was stored in that variable. function EatCookie(name) {
arg=name+"=";
alen=arg.length;
clen=document.cookie.length;
i=0;
while (i<clen) {
j=i+alen;
if (document.cookie.substring(i,j) == arg) {
return EatCookieVal(j);
}
i=document.cookie.indexOf(" ",i) + 1;
if (i === 0) {break;}
}
}
function EatCookieVal(offset) {
endstr=document.cookie.indexOf(";",offset);
if (endstr == -1) {endstr=document.cookie.length;}
return unescape(document.cookie.substring(offset,endstr));
}
Tossing a CookieTossCookie is a generic function that removes an old cookie value from further use. It relies on the fact that each cookie has an expiry date. By setting that date to one prior to today, the cookie will be eliminated automatically. function TossCookie(name) {
ThreeDays = 3*24*60*60*1000; //in millisecounds
expDate=new Date();
expDate.setTime(exp.getTime()-ThreeDays);
document.cookie=name+'=foobar; expires='+expDatetoGMTString();
}
Working Example #1 - Saving a User PreferenceOne of the most common uses of cookies is saving user preferences for reuse. Our example will use an improved color selector based on the one in tutorial 7 and save its setting. Returning to the page will reset the color to the last setting selected. function newColor(entry,areaID) { // use DOM only, no geezer browsers
BakeCookie("colorSet",entry,expDate);
styleObj=document.getElementById(areaID).style;
styleObj.background=entry;
}
STEP 1: Create an interface such as a form for the color entry. Forms and DHTML has several methods that may be used. Make sure that the element that displays the color has an id attribute. STEP 2: Add a script element to the document body and initialize a global value for the cookie's expiry date. expDate=new Date(); ThreeDays = 3*24*60*60*1000; //in millisec expDate.setTime(exp.getTime()-ThreeDays); STEP 3: Copy the BakeCookie(), EatCookie(), TossCookie() and newColor() functions into the script. STEP 4: Set up init function that eats the old cookie if it is there and calls the color setting function. Call this function with the onload attribute in the body element. function InitCookie(areaID) { // points at color element
colorSet = null;
if (!(colorSet = EatCookie("colorSet"))) {colorSet=null;}
if (colorSet !== null) {newColor(colorSet,areaID);}
}
STEP 5: Add a call from the color setting function to bake a new cookie with any updates. Working Example #2 - Saving a User 'Agreement'User agreement to site policy statements are common on corporate sites offering copyright material or corporate property on-line. To perform this kind of customer recording you would first display 'the terms of use' message with a checkbox or radio button for acknowledgement of reading. Some do not display checkbox/button until scrolling has been done, indicating a chance of 'terms' being read. At the acknowledgement, a cookie is created so that the next visit does not show the agreement. Some sites also create a mailto message at this point to record the visitors agreement (ie. documentation for later legal use). Any page that requires the agreement would check for the cookie's existence and if not there redirect the user to the agreement page. Step 1: Create a form with the 'terms' and buttons for acknowledgement. Step 2: When 'Agree' button is checked bake a cookie for it. Step 3: If needed, submit the form as a mailto or to a mail server. Step 4: Add an eat cookie and if not found then redirect routine to each page on site that requires agreement acknowledgement. Note that this section is a work in progress. The preceding is an algorithm that will work. The actual code will be developed soon and included. |