CookieHandling

Submitted by chris on Mon, 03/15/2010 - 20:22

This is some HTML that saves a user name and a background colour preference between sessions

 

<html>
<head>
<title>Cookies Example</title>
<style type="text/css">
<!--
.red {
  background:#ffbbbb;
}

.blue {
    background:#bbbbff;
}
-->
</style>

<script type="text/javascript" src="cookies.js"></script>

<script language="javascript">
function changeStyle(pref_style){
	document.getElementById('body').className=pref_style;
	setCookie("prefstyle", pref_style);
}

function setPrefs(){
    var pref_style = getCookie("prefstyle");
	document.getElementById('body').className=pref_style;
	sayHello();
}

function storeUserName(){
    var username = document.getElementById('username').value;
    alert(username);
	setCookie("username", username);
	sayHello();
}

function sayHello(){
    if(getCookie("username") != null) {
        document.getElementById('getUserName').style.visibility="hidden";
        document.getElementById('sayHello').style.visibility="visible";
        document.getElementById('sayHello').innerHTML="Hello " + getCookie("username");
    }
}


</script>

</head>
<body id="body" onload='setPrefs();'>

<div id='getUserName'>
    <form onsubmit='storeUserName()'>
        Hello, what is you name? <input id='username' /><input type='submit' value='Set' />
    </form>
</div>

<div id='sayHello' style="visibility: hidden;">
    Hello
</div>

<a href='javascript:changeStyle("blue")'>I like blue</a>
<br>
<a href='javascript:changeStyle("red")'>I like red</a>
<P>
<a href="#" onclick='alert(getCookie("prefstyle"));return false'>Get Cookie!</a> 
<a href="#" onclick='deleteCookie("prefstyle");deleteCookie("username");return false'>Delete Cookies!</a>

</body>
</html>

The content of the cookies.js is

 
/**
 * Sets a Cookie with the given name and value.
 *
 * name       Name of the cookie
 * value      Value of the cookie
 * [expires]  Expiration date of the cookie (default: end of current session)
 * [path]     Path where the cookie is valid (default: path of calling document)
 * [domain]   Domain where the cookie is valid
 *              (default: domain of calling document)
 * [secure]   Boolean value indicating if the cookie transmission requires a
 *              secure transmission
 */
function setCookie(name, value) {
  var largeExpDate = new Date ();
  largeExpDate.setTime(largeExpDate.getTime() + (30 * 24 * 3600 * 1000));
  var curCookie = name + "=" + escape(value) + "; expires=" + largeExpDate.toGMTString();
  document.cookie = curCookie;
}

/*
  name - name of the desired cookie
  return string containing value of specified cookie or null
  if cookie does not exist
*/

function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else
    begin += 2;
  var end = document.cookie.indexOf(";", begin);
  if (end == -1)
    end = dc.length;
  return unescape(dc.substring(begin + prefix.length, end));
}


/*
   name - name of the cookie
   [path] - path of the cookie (must be same as path used to create cookie)
   [domain] - domain of the cookie (must be same as domain used to
     create cookie)
   path and domain default if assigned null or omitted if no explicit
     argument proceeds
*/

function deleteCookie(name, path, domain) {
  if (getCookie(name)) {
    document.cookie = name + "=" +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

// date - any instance of the Date object
// * hand all instances of the Date object to this function for "repairs"

function fixDate(date) {
  var base = new Date(0);
  var skew = base.getTime();
  if (skew > 0)
    date.setTime(date.getTime() - skew);
}

CookieHandling

Search