javascript实现操作cookie实现的可记忆菜单

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
< title > 可记忆菜单 </ title >  
< style  type ="text/css" > ...  
body {...}{font:12px Tahoma, sans-serif;color:#4D4D4D;margin:0px; text-align:center} 
a{...}{color:#4D4D4D;text-decoration:none} 
a:hover{...}{color:#AD0000;text-decoration:none} 
#menu {...}{width:160px;margin:0px;padding:0px;text-align:left;list-style:none;border:1px solid #B0D4ED} 
#menu .item {...}{margin:0px;padding:0px;list-style:none; text-align:center} 
a.title:link,a.title:visited,a.title:hover {...}{display:block;height:30px;line-height:30px; margin-top:1px;background:#E1F2FD;border-top:1px solid     #B0D4ED;border-bottom:1px solid #B0D4ED;font-weight:bold;} 
#menu .item ul {...}{margin:0;list-style:none;display:none;text-align:center} 
#menu .item ul li {...}{height:24px;line-height:22px;border-bottom:1px solid #BFDBEE;margin:0 20px} 
</ style >  
< script  language ="javascript"  type ="text/javascript" > ...  
// --- 获取ClassName 
document.getElementsByClassName = function(cl) ...{ 
    var retnode = []; 
    var myclass = new RegExp('/b'+cl+'/b'); 
    var elem = this.getElementsByTagName('*'); 
    for (var j = 0; j < elem.length; j++) ...{ 
        var classes = elem[j].className; 
        if (myclass.test(classes)) retnode.push(elem[j]); 
    } 
    return retnode; 
} 
// --- 隐藏所有 
function HideAll() ...{ 
    var items = document.getElementsByClassName("optiton"); 
    for (var j=0; j<items.length; j++) ...{ 
        items[j].style.display = "none"; 
    } 
} 
// --- 设置cookie 
function setCookie(sName,sValue,expireHours) ...{ 
    var cookieString = sName + "=" + escape(sValue); 
    //;判断是否设置过期时间 
    if (expireHours>0) ...{ 
         var date = new Date(); 
         date.setTime(date.getTime + expireHours * 3600 * 1000); 
         cookieString = cookieString + "; expire=" + date.toGMTString(); 
    } 
    document.cookie = cookieString; 
} 
//--- 获取cookie 
function getCookie(sName) ...{ 
  var aCookie = document.cookie.split("; "); 
  for (var j=0; j < aCookie.length; j++)...{ 
    var aCrumb = aCookie[j].split("="); 
    if (escape(sName) == aCrumb[0]) 
      return unescape(aCrumb[1]); 
  } 
  return null; 
} 
window.onload = function() ...{ 
    var show_item = "opt_1"; 
    if (getCookie("show_item") != null) ...{ 
         show_item= "opt_" + getCookie("show_item"); 
    } 
    document.getElementById(show_item).style.display = "block"; 
    var items = document.getElementsByClassName("title"); 
    for (var j=0; j<items.length; j++) ...{ 
        items[j].onclick = function() ...{ 
            var o = document.getElementById("opt_" + this.name); 
            if (o.style.display != "block") ...{ 
                HideAll(); 
                o.style.display = "block"; 
                setCookie("show_item",this.name); 
            } 
            else ...{ 
                o.style.display = "none"; 
            } 
        } 
    } 
} 
</ script >  
</ head >  
< body >  
< ul  id ="menu" >  
     < li  class ="item" >< a  href ="javascript:void(0)"  class ="title"  name ="1" > 菜单选项一 </ a >  
       < ul  id ="opt_1"  class ="optiton" >  
           < li >< a  href ="#" > 子菜单一 </ a ></ li >  
           < li >< a  href ="#" > 子菜单二 </ a ></ li >  
           < li >< a  href ="#" > 子菜单三 </ a ></ li >  
           < li >< a  href ="#" > 子菜单四 </ a ></ li >  
       </ ul >  
     </ li >  
     < li  class ="item" >< a  href ="javascript:void(0)"  class ="title"  name ="2" > 菜单选项二 </ a >  
       < ul  id ="opt_2"  class ="optiton" >  
           < li >< a  href ="#" > 子菜单一 </ a ></ li >  
           < li >< a  href ="#" > 子菜单二 </ a ></ li >  
           < li >< a  href ="#" > 子菜单三 </ a ></ li >  
           < li >< a  href ="#" > 子菜单四 </ a ></ li >  
       </ ul >  
     </ li >  
     < li  class ="item" >< a  href ="javascript:void(0)"  class ="title"  name ="3" > 菜单选项三 </ a >  
       < ul  id ="opt_3"  class ="optiton" >  
           < li >< a  href ="#" > 子菜单一 </ a ></ li >  
           < li >< a  href ="#" > 子菜单二 </ a ></ li >  
           < li >< a  href ="#" > 子菜单三 </ a ></ li >  
           < li >< a  href ="#" > 子菜单四 </ a ></ li >  
       </ ul >  
     </ li >  
     < li  class ="item" >< a  href ="javascript:void(0)"  class ="title"  name ="4" > 菜单选项四 </ a >  
       < ul  id ="opt_4"  class ="optiton" >  
           < li >< a  href ="#" > 子菜单一 </ a ></ li >  
           < li >< a  href ="#" > 子菜单二 </ a ></ li >  
           < li >< a  href ="#" > 子菜单三 </ a ></ li >  
           < li >< a  href ="#" > 子菜单四 </ a ></ li >  
       </ ul >  
     </ li >  
</ ul >      
</ body >  
</ html >