JavaScript Tip of the Week for July 1st, 1996: Part 2: Using the Cookie | WebReference

JavaScript Tip of the Week for July 1st, 1996: Part 2: Using the Cookie

JavaScript Tip of the Weekfor July 1st, 1996: Part 2: Using the Cookie


Now that you know how the cookie is used, I will show you two practical applications of it. First, how is the form data (your name) saved to the cookie? Start out by creating a simple form like this:
<FORM>
Please enter your name:
<INPUT TYPE = "text" NAME = "nameinput"><BR><BR>
<INPUT TYPE = "button" VALUE = "Save to Cookie" onClick = "set_name(this.form)">
</FORM>

When the "Save to Cookie" button is pressed, the form is sent to the set_name() function. Keep in mind that the name of the text input box where your name is entered is called nameinput.
function set_name(form) {
    var expdate = new Date ();                                        
    expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000 * 31));     expiration date
    var username = form.nameinput.value      
        if (username != "") {
            if (confirm("Are you sure you want this saved as your name?"))
            SetCookie ("jtotwname", username, expdate);
        }
        else alert("Geez, at least enter something,
                    entering nothing will cause an error.");
}

Function set_name sets the expiration date of the cookie to one month. Then it sets the value of the form's text input box nameinput to variable username. After confirming that the you want to save this as your name, it uses the SetCookie() function to save a cookie called "jtotwname" with the value of username. That's all there is to it. Now to simply reload that name, use this function:
function show_name() {
    if(GetCookie("jtotwname") != null)
        document.write("Welcome " + GetCookie('jtotwname') + ". ");
    else document.write("You did not enter your name.");
}
This checks to see if there is anything in the "jtotwname" cookie, and if there is then it loads up the name using GetCookie() and prints "Welcome name.", where name is the saved name.

Another thing that you might be interested is showing a user is the the number of times that they have visited the site.
function show_count() {
    var num;
    var expdate = new Date();
    expdate.setTime(expdate.getTime() +  (24 * 60 * 60 * 1000 * 31)); 
    if(!(num = GetCookie("jtotwcount"))) 
    num = 0; num++;  
    SetCookie ("jtotwcount", num, expdate);
First variable num, which stands for the number of counts, is defined. Then the function checks if there is anything in the "jtotwcount" cookie, and if there isn't it gives the variable num value of 0. If there is anything in the cookie it adds one to that value.
 
    if (num == 1) document.write("This is your first time here.");
    else document.write("You have been here " + num + " times.");    
If the value of the cookie is greater than 0, it displays out "You have been here x times.", and saves the value of num to the "jtotwcount" cookie. Otherwise it displays "This is your first time here." The name of the cookie can be changed to anything you want for your own cookie.

I'm sure there are about 1,000 other more interesting uses for cookies. Customize a page so that it only displays certain information when a user comes back. If the user has filled out a form saying that he/she is interested in some topic, the page can now display only things relating to that topic. Most likely I will be adding cookie funcions to the front page of this site. When you come back it will tell you what is new since you have visited last, and it may display what tips you would be interested in according to your level of JavaScript expertise.

Source