A Script That Remembers Values Typed into a Text Box

HTTP cookies can be used both for server-side and client-side programming. There are many ways to use cookies in Javascript. In this short tutorial we will concentrate on the client-side. The task is to build a script that will remember values users type in a text box and display them next time the users access the page.
Let's say we have a form with an input box "project" and a submit button. We want to capture the values entered by the user and save them for later use. Cookies seem to be an ideal solution to this problem. No server-side programming or maintenance.
A working example is located here .
We'll need two functions to read and set cookies. They are pretty much standard and can be easily found on the web.
Let's start with a function that sets the cookie.

function setCookie (name, value, expires,
  path, domain, secure) {
     document.cookie =
      name + "="
      + escape(value)
      + ((expires) ? "; expires="
      + expires.toGMTString() : "")
      + ((path) ? "; path=" + path : "")
      + ((domain) ? "; domain=" + domain : "")
      + ((secure) ? "; secure" : "");
}

The parameters to the function are self-explanatory:

name is the cookie name we are going to use

value is the cookie's value

expires - a date that the cookie will expire.

The path sets the top level directory from which a cookie can be read.
Set the path of a cookie to the top-level directory of your Web pages, and the cookie is readable by all your Web pages.
To get a cookie value we'll use the following function:

 function getCookie(name) {
  // break cookie into array of bites
   var bites = document.cookie.split("; ");
    for (var i=0; i < bites.length; i++) {
     // break into name and value 
      nextbite = bites[i].split("=");
      // if name matches 
      if (nextbite[0] == name)
      // return value 
       return unescape(nextbite[1]);
    }
    return null;
 }
 

Let's write a function that would add values to the existing cookie. 2 arguments will be passed to the function: cookieName and formField.
First, let's get the value typed by the user:
Now, we'll set the expiry date to 30 days from today.:

Get the contents of the cookie using the getCookie function:
var contents= getCookie(cookieName);
Add the new value typed by the user to the existing cookie contents.
We chose to separate values by a period. You can use any other separators.
The last thing to do is to send the new cookie contents to our setCookie function:
Here is the full listing of the function:

function addString(cookieName, formField){
 var field = eval ("document.forms[0]."+ formField);
 var txtVal =field.value;
 var expires = new Date();
 expires.setDate(expires.getDate() + 30);
 var contents= getCookie(cookieName);
 if(contents != null && contents.indexOf(txtVal)<0)
  contents+="."+txtVal;
 else if(contents == null)
  contents = txtVal;

 setCookie(cookieName, contents, expires,"/");
}

We'll call this function from the onSubmit event of the form, like this:
<form onSubmit='addString ("example","txt1")'>
Now, the only thing to do is to write the contents of the cookie on the HTML page.
Here is the function that does it:

function writeCookieValues (val) {
 if(val!= null && val.length>0){
  var str = new String(val);
 //split the resulting array by a separator
 //used earlier in the addString function
 var aPr = str.split(".");
 for(var i=0; i < aPr.length; i++)
  document.write(aPr [i]+"<br>");
 }
}

Use it like this:
<script language='JavaScript'> writeCookieValues (getCookie("example")); </script>