视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用js操作cookie的一点小收获分享_javascript技巧
2020-11-27 21:13:23 责编:小采
文档

为了说清楚这个问题,必须从头说起。

首先从后台配置一个参数,放到一个字段里,该字段叫做keywords,这个参数的值叫做efmis://|efmfj|username|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012/|||||02,姑且不去管这个值有什么含义,相信很多人都遇到过比这个更复杂的字符串。后台配置以后,前台可以这么来显示:${tag_bean.keywords},可以肯定,无论后台配置成什么,前台一定会原定不变的显示出来,第一个问题出现:在username这个位置上,嵌入的是当前登录用户的用户名,必须是动态代码。难道要写成efmis://|efmfj|${username}|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012?这样写跟期望可有所不同,它会原样不变的显示出来,并不会把EL表达式翻译成动态代码,暂时不考虑能不能使用EL表达式的嵌套,很显然不能直接使用,一定要要处理这么一个字符串。

这个字符串是要作为一个js方法的参数的,例如:
代码如下:

  • [/#if] path="${c.path}" onclick="clickClient(this.path,this.keywords);">
    ${c.name}



  • clickClient这个方法不是真正要调用的方法,只是一个过渡方法而已。
    代码如下:
    clickClient = function(path,keywords){
    //解析分解keywords开始
    keywords = keywords.replace("username","${user.username}");
    var suffIndex=keywords.indexOf("http");
    var prefix = keywords.substr(0,suffIndex-1);
    var suffix = keywords.substr(suffIndex-1);
    var preIndex=prefix.lastIndexOf("|")+1;
    var year = prefix.substr(preIndex);
    prefix = prefix.substr(0,preIndex);
    //解析分解keywords结束
    //合并url
    keywords = prefix+$("#year").val()+suffix;
    clientInvoke(path,keywords);
    }

    在这个方法,最终实现的目的是调用clientInvoke方法,而传进去的参数keywords是变化,要经过一定的处理,首先把${user.username}把user替换掉,在js代码中,即使含有EL表达式也会动态的解析出来,这点就实现了动态的调用当前用户名的目标。当2014这个年度也要设置为动态的,并且是可以切换的,那就要把该字符串分解成三个部分:

    前缀:efmis://|efmfj|username|2200|0||

    年度:2014

    后缀:|http://10.20.1.54:7001/cssServerportal222012/|||||02

    把年度放在一个select下拉菜单中,当触动clickClient方法时,即时的从当前option中取出年度,然后和前缀后缀拼接起来,这样就是实现了年度可变化的灵活性。
    代码如下:
    年度切换


    这时候会有一个问题,当年度切换之后,比如默认的2014,切换到2013之后,如果刷新页面,就会重新变回默认的2014,这个该怎么办呢?刷新之后所有的变量都重新加载了,所以设置全局变量这个方法就行不通了,那么我们要问,什么东西是不随着页面刷新而变化并且我们很容易进行操作的?看到本文的标题我想所有人都会知道了:cookie!

    cookie是保存在本地的资源,可以随存随取,在记住密码的功能上起了极大的作用。这时候我们就利用cookie,把年度存在cookie中。每次加载页面时,判断cookie是否存在,如果存在就从中取出放入select,如果不存在就从select中取出,存入cookie。
    代码如下:
    $(document).ready(function(){
    if(getCookie("Year")==null){//不存在该cookie,放进去
    setCookie("Year",$("#year").val());
    }else{
    //已经存在该cookie,则从中取出
    $("#year").val(getCookie("Year"));
    }
    });
    //设置cookie
    function setCookie(name,value)
    {
    //var Days = 30;
    //var exp = new Date();
    //exp.setTime(exp.getTime() + 365*24*60*60*1000);
    document.cookie = name + "="+ escape (value);
    // + ";expires=" + exp.toGMTString();
    }
    //读取cookies
    function getCookie(name)
    {
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
    }

    在切换年度的时候,cookie的值当然也要发生变化:
    代码如下:
    switchYear=function(year){
    setCookie("Year",year);
    }

    根据用户的要求,一定要让2014作为默认。每次切换完cookie操作完成之后,关闭浏览器,重新打开登录进入首页,年度依然要是2014,而不是上次切换的那个值。所以我们就不需要设定cookie的过期时间了,只需要让其在浏览器关闭后自动清除即可。

    当然了,如果期望浏览器长期记住cookie,就设定过期时间,setCookie中的注释代码正是设置过期时间用的。感兴趣的可以研究下。

    下载本文
    显示全文
    专题