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.