Javascript Lesson 11

Foreword

Cookies are used for information storage that can be read either by the same page on a later viewing, other pages on the same site or by servers.

11.1 Cookie Parameters

Below is a list of all the available Cookie Parameters, not all of them are required to make a cookie:

  • Name: Used as the identifier as many cookies could be used for different purposes by the same site. Names can't contain semicolon, comma or space.
  • Value: The data that is to be saved.
  • Expires: Last date that the value is valid for. Format is dd/mm/yy hh:mm:ss UTC
  • Path: Restricts cookie to specific level of a site. The default value is the level that made the cookie.
  • Domain: Site specification to restrict access to cookies.
  • Secure: If used, the cookie responds only to a secure server. The default value is false

11.2 Creating A Cookie

The following syntax is used to create a cookie:

document.cookie = "name=value; expires=date; path=path; domain=domain; secure";

Some example to set a cookie would be:

  • document.cookie = "username=Scott; expires=07/07/2006 00:00:00";
  • document.cookie = "loggedIn=yes; domain=proglogic.com";

It would be a lot easier to just write a function that creates a cookie. The code would look like this:

<script language="JavaScript">
<!--
function createCookie(name, value, expYear, expMonth, expDay, path, domain, secure){
  var cookieString = name + "=" + value
  if(expYear){
    var expires = new Date (expYear, expMonth, expDay)
    cookieString += "; expires=" + expires.toGMTString()
	}
  if(path){
    cookieString += "; path=" + path
	}
  if(domain){
    cookieString += "; domain=" + domain
	}
  if(secure)
  	cookieString += "; secure"
	}
  document.cookie = cookieString
  }
//-->
</script>

With this function in the Head section, the previous examples would look like this:

  • createCookie("username", "Scott", 2006, 07, 07)
  • createCookie("loggedIn", "yes", "", "", "", "", "proglogic.com")

11.3 Deleting A Cookie

The following function deletes a cookie from the browser by setting the expiry date to one second in the past.

<script language="JavaScript">
<!--
function deleteCookie(cookieName){
  var cookieDate = new Date()
  cookieDate.setTime(cookieDate.getTime()-1)
  document.cookie = cookieName += "=; expires=" + cookieDate.toGMTString()
  }
//-->
</script>

To use this function, just pass in the name of the cookie you would like to delete. For example:

deleteCookie("username")

11.4 Reading Cookies

You can retrieve all previously set cookies by using the following syntax:

var x = document.cookie

This returns a string comprising a list of name=value pairs, separated by semi-colons, for all the cookies that are valid for the current document. For example:

"username=Scott; loggedIn=yes"

In this example 2 cookies have been previously set: username with a value of Scott and loggedIn with a value of yes.
A string containing all the cookies is not really helpful as you'll usually only want to read the value of one cookie at a time.
Therefore you can use the following function:

<script language="JavaScript">
<!--
function readCookie(cookieName){
  var results = document.cookie.match(cookieName + '=(.*?)(;|$)')
  if(results){
    return(results[1])
    }
  else{
    return null
    }
  }
//-->
</script>

The function uses a regular expression to find the cookie name and value we're interested in. Using this function will return the value of the cookie, for example:

readCookie("username") would return Scott

11.5 Exercices

  • Make a cookie, then read it and display it's value.
  • Now delete this cookie using JavaScript.
Home | Code | Learn
© 2007-2008 ProgLogic, all rights reserved. | ProgLogic.com is created by Stijn Strickx. | e-mail