Delete cookies on log out

[rizlaa]

Script: Switch Content Script
URL: http://www.dynamicdrive.com/dynamici...tchcontent.htm

Hi,

I have an application which has a login page. I wish to delete the cookies when the user has logged out, returning to the login page so that the menu javascript runs as if this is the first login the next time the user logs in to the application. I wish to be able to do this without having to close the browser.

Regards,
Riz

[Twey]

If your application uses a login page, use your server-side language to delete the cookies.

[jscheuer1]

If not or since this is a javascript cookie to begin with, these two cookie functions from Quirksmode should work:

function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function eraseCookie(name)
{
	createCookie(name,"",-1);
}

All that need be done is invoke eraseCookie(name), with the proper cookie name, onload of the login page, an event on it or other page(s), or onunload of whatever page(s) or in association with the logout event. Think it through as to where/when/how exactly you want this to occur. Be aware that onunload will not fire as expected in all browsers, Opera being the least likely to fire the event, though it will under certain circumstances.

It might be best to delete the cookie at login, if you think about it.

[rizlaa]

Thanks for the replies.

Is the name of the cookie in this script being set as firsttimeload??

[jscheuer1]

The script sets two cookies. One is the the window.location.pathname+'firsttimeload' and is a value of 1 (if the first time) or 0 if not. This cookie may not be so important as the other one whose name is:

window.location.pathname

and whose values are the open content items' ids.

The script could be changed to use a less mercurial name for both cookies, by changing all four instances of:

window.location.pathname

to:

'switch_cookie'

with the quotes. Then the two cookie names would be:

'switch_cookiefirsttimeload'

and:

'switch_cookie'

respectively. Much easier to erase:

eraseCookie('switch_cookiefirsttimeload');
eraseCookie('switch_cookie');

However, none of these would be site wide cookies, so they could only be reliably "erased" from the page they were set on. The script also could be rewritten to set a sitewide cookie that could be erased from anywhere on the domain where it was created. This would be a bit more complicated, most easily accomplished (for me) using the full cookie unit from Quirksmode to set and manage all cookies related to this script. I'm a little pressed for time at the moment, so I will get back to you on that.

[jscheuer1]

OK, hope you are still with me, I've rewritten the script to set site wide session cookies for both cookies used by the script. This means that both cookies will still be deleted (as before) when all browser instances are closed. But, the two cookies, now named 'firsttimeload' and 'switch_content' are site wide, so they can be erased from any page on the domain, even during session (while any instance of the browser is open). To do this, these two functions must be on or available to the cookie erasing page:

<script type="text/javascript">
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function eraseCookie(name)
{
createCookie(name,"",-1);
}
</script>

This syntax is used to delete both cookies:

<script type="text/javascript">
eraseCookie('firsttimeload');
eraseCookie('switch_cookie');
</script>

As I said before, it is up to you when to do this but, if there is something that happens immediately after login, that would probably be the best time, erasing any cookies for the switch content page that might be left over from a previous login in the same session. If there are no previous cookies, you can still run it, it will not hurt anything.

Here is the modified script:

<script type="text/javascript">

/***********************************************
* Switch Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 2nd, 2005.
* Visit http://www.dynamicdrive.com/ for full source code
* Modified to use site wide cookies by jscheuer1 in
* http://www.dynamicdrive.com/forums
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)

var contractsymbol='- ' //HTML for contract symbol. For image, use: <img src="whatever.gif">
var expandsymbol='+ ' //HTML for expand symbol.

////////////////Stop Editing////////////////

function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

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

function eraseCookie(name)
{
createCookie(name,"",-1);
}

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var thestate=(ec=="expand")? "block" : "none"
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=thestate
inc++
}
revivestatus()
}


function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(curobj, cid){
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="block")
statecollect[inc].innerHTML=contractsymbol
else
statecollect[inc].innerHTML=expandsymbol
inc++
}
}



function getselectedItem(){
if (readCookie('switch_content') != null){
selectedItem=readCookie('switch_content')
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

createCookie('switch_content', selectedItem)
}

function do_onload(){
uniqueidn="firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && ccollect.length>0){
if (readCookie(uniqueidn)==null)
createCookie(uniqueidn, 1)
else
createCookie(uniqueidn, 0) 
firsttimeload=(readCookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

An added feature of this setup is that you could use more than one switch content page on the site with the same switch content script and markup on it. All versions will remember the open and closed state of all others, as long as the:

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)

variable is set in the config of each page using the script.

[rizlaa]

Thanks for the help, that works perfectly!!!