使用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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
深入理解js数组的sort排序
May 28 Javascript
AngularJS Controller作用域
Jan 09 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP 字符串 小常识
2009/06/05 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php 抽象类的简单应用
2011/09/06 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php使用正则验证中文
2016/04/06 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
使用vue制作滑动标签
2019/09/21 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python字典序问题实例
2014/09/26 Python
python中执行shell的两种方法总结
2017/01/10 Python
python 文件转成16进制数组的实例
2018/07/09 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python模拟实现分发扑克牌
2020/04/22 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
私人委托书格式
2014/09/10 职场文书
追悼会家属答谢词
2015/09/29 职场文书
趣味运动会标语口号
2015/12/26 职场文书