使用js操作cookie的一点小收获分享
更新时间：2013年09月03日 15:12:00 作者：
js操作cookie想必大家并不陌生吧，本文积累了一点小经验，在此与大家分享下，希望对大家有所帮助
为了说清楚这个问题，必须从头说起。
首先从后台配置一个参数，放到一个字段里，该字段叫做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方法的参数的，例如：
<li [#if c.keywords?exists] keywords="${c.keywords}"
[/#if] path="${c.path}" onclick="clickClient(this.path,this.keywords);">
<a href="javascript:void(0)" style="cursor: pointer;"><span>${c.name}</span>
</a>
</li>
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中取出年度，然后和前缀后缀拼接起来，这样就是实现了年度可变化的灵活性。
年度切换
<select id="year" onclick="switchYear(this.value);">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014" selected="selected">2014</option>
<option value="2015">2015</option>
</select>
这时候会有一个问题，当年度切换之后，比如默认的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中的注释代码正是设置过期时间用的。感兴趣的可以研究下。
首先从后台配置一个参数，放到一个字段里，该字段叫做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方法的参数的，例如：
复制代码 代码如下:
<li [#if c.keywords?exists] keywords="${c.keywords}"
[/#if] path="${c.path}" onclick="clickClient(this.path,this.keywords);">
<a href="javascript:void(0)" style="cursor: pointer;"><span>${c.name}</span>
</a>
</li>
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中取出年度，然后和前缀后缀拼接起来，这样就是实现了年度可变化的灵活性。
复制代码 代码如下:
年度切换
<select id="year" onclick="switchYear(this.value);">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014" selected="selected">2014</option>
<option value="2015">2015</option>
</select>
这时候会有一个问题，当年度切换之后，比如默认的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中的注释代码正是设置过期时间用的。感兴趣的可以研究下。
相关文章
在本篇文章里小编给大家整理的是一篇关于javaScript中indexOf用法技巧的相关文章，有需要的朋友们学习下。2019-11-11
本文主要介绍了使用setTimeout实现防止循环超时的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
在js里取值，可以用form.xx.value，也可以用form.all.xx.value，那么js取值中form.all和不加all有什么区别呢？下面就为大家详细介绍下2014-01-01
JavaScript设计模式之原型模式(Object.create与prototype)介绍
这篇文章主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍,原型模式指使用原型实例来拷贝、创建新的可定制的对象,新建的对象,不需要知道原对象创建的具体过程,需要的朋友可以参考下2014-12-12
本篇文章给大家分享javascript学习总结之js使用技巧，都是精华喔～小伙伴快来学习吧。2015-09-09
在本章中，我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了ES7之Async/await的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了微信小程序实现选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
非常不错的像素拼图效果2009-04-04
这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结，文中总结了很多的对比，相信对大家的学习或者工作能带来一定的帮助，需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
最新评论