使用js操作cookie的一点小收获分享


Posted in Javascript onSeptember 03, 2013

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

首先从后台配置一个参数,放到一个字段里,该字段叫做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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 #Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 #Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 #Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 #Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 #Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 #Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 #Javascript
You might like
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
在vue项目中使用sass的配置方法
2018/03/20 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
django中send_mail功能实现详解
2018/02/06 Python
python实现括号匹配的思路详解
2018/08/23 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
什么是View State?
2013/01/27 面试题
大学军训感言200字
2014/02/26 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
班组长竞聘书
2014/03/31 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers