使用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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
原生js实现验证码功能
Mar 16 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
Session的工作方式
2006/10/09 PHP
php实现递归的三种基本方式
2020/07/04 PHP
深入php内核之php in array
2015/11/10 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
python实现学生成绩测评系统
2020/06/22 Python
Python实现数字的格式化输出
2020/08/01 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
运动会邀请函范文
2014/02/06 职场文书
质量承诺书怎么写
2014/05/24 职场文书
优秀员工评优方案
2014/06/13 职场文书