Using Cookies in Web pages

with useful JavaScript snippets

Why use Cookies and JavaScript

Cookies are even more hated by many users who do not understand their purpose and mistrust them but again they have a real use. HTML and JavaScript originally had no way of holding onto information and passing it between pages or using it in multiple pages. This was deliberate decision to ensure confidetiallity and security when changing from one web site to another. It was quickly realised that this was too restrictive and the Cookie (Magic Cookie) was added to JavaScript. It holds information whilst you are visiting a site and is only accessible to pages on that site. They can be restricted to the life of the Browser Session and stored in mememory or they can be given an expiry date and stored on disk so they can be accessed again when the site is visited.

Both forms are useful - they allow a message to be displayed the first time the site is visited or a page is used rather than frustrating the user by repeating it every time. In the the less persistent form they can be used to pass information to a popup Window such as the Title to be displayed and the Picture to be shown. There are some other mechanisms which will do that for simple images but they break down for Embedded functions such as video.

I am not going to explain exactly how the information is stored within Cookies and retrieved from Cookies - it is perhaps helpfull to know that lots of values can be stored within the single Cookie which JavaScript provides. There is information in books such as Special Edition - Using JavaScript by Paul McFedries and on a number of Web Sites. There are a number of JavaScript Functions in the public domain which allow lots of variables to be simply stored and accessed from a Cookie but none did exactly what I wanted and/or were sufficiently independent of JavaScript/Browser versions - most sought elegance at the expense of independence. The following functions which I have written may be less elegant but should be effective over a wide range of browsers and JavaScript versions from 1.0 onwards.

The setCookie() function allows one to simply chose a "per-session" or set a lifetime for a "persistent" name and value pair in the Cookie. It also allows one to delete a "persistent" name from the Cookie when you have finished with it. It can also take an optional path parameter to allow access in all directories on the site rather than the be restricted to the directory and sub directory below where it was set. The getCookie function handles all the complicated activities and returns the value when called with the name. It is confusing that cookie is usually used to refer to the particular "name and associated value" within the single Magic Cookie associated with the Site being visited at the time. I make no promises but you are welcome to use the code below for setCookie() and getCookie() can be cut and pasted into the Head section of the page preferably with the acknowledgement.

<SCRIPT language="JavaScript" type="text/javascript">
<!-- 

/* Call function as setCookie("cookiename" , cookievalue, lifetime, cookiepath)
with the lifetime required in days, -1 to delete a cookie or zero
for a temporary cookie. The Cookie Path is optional.*/

function setCookie(cookie_name, cookie_value, cookie_life, cookie_path) {
  var today = new Date()
  var expiry = new Date(today.getTime() + cookie_life * 24*60*60*1000)
  if (cookie_value != null && cookie_value != ""){
    var cookie_string =cookie_name + "=" + escape(cookie_value)
    if(cookie_life){ cookie_string += "; expires=" + expiry.toGMTString()}
    if(cookie_path){ cookie_string += "; path=" + cookie_path}
 	document.cookie = cookie_string
  }
} // Based on JavaScript provided by Peter Curtis at www.pcurtis.com -->

/* Call function as getCookie("cookiename") It returns the value of a cookie
if set or null. Beware of potential ambiguities in names of cookies -
getCookie is simple and will match the end of a string so xyname 
will also be matched by yname and ame. */
 
function getCookie(name) {
  var index = document.cookie.indexOf(name + "=")
  if (index == -1) { return null}
  index = document.cookie.indexOf("=", index) + 1
  var end_string = document.cookie.indexOf(";", index)
  if (end_string == -1) { end_string = document.cookie.length }
  return unescape(document.cookie.substring(index, end_string))
} // Based on JavaScript provided by Peter Curtis at www.pcurtis.com -->


</SCRIPT>

      JavaScript:alert(document.cookie)

Try this on commercial sites and see what they are storing (unfortunately it does not tell you if it is persistent between sessions)

Copyright © Peter and Pauline Curtis Content revised: 8th December 2001