使用Cookie保存菜单状态

一、使用Javasceipt操作Cookies 的基本方法。

 1.写入Cookies。

// メニューのCookiesを新規作成する
  function  SetCookie( name,value)  {
     
//Cookie Save as 30 Day
     var Days = 30;
     
var exp  = new Date();
     exp.setTime(exp.getTime() 
+ Days*24*60*60*1000);
     document.cookie 
= name + "="+ escape (value) + ";expires=" + exp.toGMTString();
 }

2.取得Cookies。

// 取cookies函数
  function  getCookie(name) {
     
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));      
      
if(arr != null{
       
return unescape(arr[2]);
      }
else{
        
return null;
      }

 }

 

 3.删除Cookies。

// ユーザーのCookieを削除するe
  function  delCookie(name) {
     
var exp = new Date();
     exp.setTime(exp.getTime() 
- 1);
     
var cval=getCookie(name);
     
if(cval!=null{
         document.cookie
= name + "="+cval+";expires="+exp.toGMTString();
     }

 }

-----------------------------------------------------------------------------

4.加载menu菜单状态。

// メニューを初期化する
  function  MenuInit()  {
  
var ob = document.getElementsByTagName("table");
  State 
= getCookie("Ryouka_Menu");
  
for(var i=0; i<ob.length;i++){
  MenuSwitch 
= State.substring(i-1,i);
   
if(ob[i].id.substr(0,4)=="KM00"&&MenuSwitch=="0"){
    ob[i].style.display
="none";
   }
else
    ob[i].style.display
="";
  }

 }

5.单击菜单时改变Cookieszhong菜单状态。

// クリックする時メニューの状態を変える
  function  changemenu(tablemenu)  {
  
var count = new String();
  count 
= tablemenu.id.toString();
  
if(tablemenu.style.display=="none"{
   tablemenu.style.display
="";
   
//parameter(Bit,スウィッチの状態=Open);
   if(Mcookies == "1"{
   ModiCookie(count.substring(
4,5), "1");
   }

  }
else{
   tablemenu.style.display
="none";
   
//parameter(Bit,スウィッチの状態=Close);
   if(Mcookies == "1"{
   ModiCookie(count.substring(
4,5), "0");
   }

  }

 }

6.保存menu状态的具体方法。

// メニュー状態を保存する
  function  ModiCookie(bit,Value)  {
  
var State_Front;
  
var State_Back; 
  
var State;
  State 
= getCookie("Ryouka_Menu");
  State_Back 
= State.substring(bit,State.length);
  
//alert("State.length=" + State.length);
  State_Front = State.substring(0,bit-1);
  State 
= "";
  
//alert("State_Front=" + State_Front + ", Value=" + Value + ", State_Back=" + State_Back);
  if(bit == 1)
   State 
= State.concat(Value , State_Back);
  
else
   State 
= State.concat(State_Front , Value , State_Back);
  SetCookie(
"Ryouka_Menu", State);
 }

7.注解:

(1)match 方法
使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。
stringObj.match(rgExp)

(2)unescape 方法
解码用 escape 方法进行了编码的 String 对象。

(3)substr 方法
返回一个从指定位置开始的指定长度的子字符串。

(4)concat 方法(String)
返回字符串值,该值包含了两个或更多个提供的字符串的连接。
string1.concat([string2[, string3[, . . . [, stringN]]]])

(5)substring 方法
返回位于 String 对象中指定位置的子字符串。
strVariable.substring(start, end)

 8.客户端Cookies文件内容举例

System_Menu
0110000000
10.10.8.8/rk_cims/
1600
276435712
29801903
411407072
29795868
*

 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现菜单下拉状态的保持,可以使用jQuery的类操作和Cookie来实现。 首先,在菜单项被点击时,使用jQuery的addClass()方法给当前菜单项添加一个active类,同时移除其他菜单项的active类。然后,使用jQuery的siblings()方法选择当前菜单项的兄弟元素,移除它们的active类。 接下来,将当前菜单项的文本和链接保存Cookie。当页面重新加载时,从Cookie读取上次保存菜单项文本和链接,使用jQuery的addClass()方法给该菜单项添加active类,同时移除其他菜单项的active类。 下面是一段示例代码: ```javascript $(function() { // 获取Cookie保存菜单项文本和链接 var activeText = $.cookie('activeText'); var activeLink = $.cookie('activeLink'); // 如果Cookie保存菜单项,则根据保存的文本和链接添加active类 if (activeText && activeLink) { $('.menu-item:contains(' + activeText + ')').filter(function() { return $(this).attr('href') === activeLink; }).addClass('active').siblings().removeClass('active'); } // 菜单项被点击时 $('.menu-item').click(function() { // 添加active类,并移除其他菜单项的active类 $(this).addClass('active').siblings().removeClass('active'); // 将当前菜单项的文本和链接保存Cookie $.cookie('activeText', $(this).text()); $.cookie('activeLink', $(this).attr('href')); }); }); ``` 需要注意的是,这段代码使用了jQuery的cookie插件来读取和保存Cookie。如果没有安装该插件,需要先引入jQuery和cookie插件的js文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值