使用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 相关文章推荐
jquery基础教程之数组使用详解
Mar 10 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 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 高效率写法 推荐
2010/02/21 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
tornado捕获和处理404错误的方法
2014/02/26 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python游戏地图最短路径求解
2019/01/16 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
人事主管岗位职责范本
2013/12/04 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
九年级英语教学反思
2014/01/31 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
社区志愿者培训方案
2014/06/10 职场文书
公司员工安全协议书
2014/11/21 职场文书
学校教师培训工作总结
2015/10/14 职场文书
创业计划书之网吧
2019/10/10 职场文书
Python Django模型详解
2021/10/05 Python