Cookie

• Cookies are data, stored in small text files, on your computer.
• JavaScript can create, read, and delete cookies with the document.cookie property.
• With JavaScript, a cookie can be created like this: document.cookie = "username=abc xyz";
• We can also add an expiry date (in UTC time) otherwise by default, the cookie is deleted when the browser is closed: document.cookie = "username=abc xyz; expires=Thu, 29 feb 2013 12:00:00 UTC";
• With a path parameter, we can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page.document.cookie = "username=abc xyz; expires=Thu, 29 feb 2013 12:00:00 UTC; path=/";
• With JavaScript, we can change a cookie the same way as we create it:

JavaScript Cookie Example

• In the example to follow, we will create a cookie that stores the name of a visitor.
• The first time a visitor arrives to the web page, user will be asked to fill in his name. The name is then stored in a cookie.
• The next time the visitor arrives at the same page, user will get a welcome message.
• For the example to do this, we will create 3 JavaScript functions:
  • A function to set a cookie value
  • A function to get a cookie value
  • A function to check a cookie value

A function to set a cookie value:

First, we create a function that stores the name of the visitor in a cookie variable:

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

• The parameters of the function above are the name of the cookie (cname), the value of the cookie (cvalue), and the number of days until the cookie should expire (exdays).
• The function sets a cookie by adding together the cookiename, the cookie value, and the expire string.

A function to get a cookie value:

Then, we create a function that returns the value of a specified cookie:

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

• Take the cookiename as parameter (cname).
• Create a variable (name) with the text to search for (cname + "=").
• Decode the cookie string, to handle cookies with special characters, e.g. '$'
• Split document.cookie on semicolons into an array called ca (ca = decodedCookie.split(';')).
• Loop through the ca array (i = 0; i < ca.length; i++), and read out each value c = ca[i]).
• If the cookie is found (c.indexOf(name) == 0), return the value of the cookie (c.substring(name.length, c.length).
• If the cookie is not found, return "".

A function to check a cookie value:

• Last, we create the function that checks if a cookie is set.
• If the cookie is set it will display a welcome greeting.

• If the cookie is not set, it will display a prompt box, asking for the name of the user, and stores the username cookie for 365 days, by calling the setCookie function:

   function checkCookie() {
          var username = getCookie("username");
          if (username != "") {
              alert("Welcome again " + username);
          } else {
              username = prompt("Please enter your name:", "");
              if (username != "" && username != null) {
                  setCookie("username", username, 365);
              }
          }
      }