使用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动画效果代码3
Apr 03 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
基于Python的接口测试框架实例
2016/11/04 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
python实现dijkstra最短路由算法
2019/01/17 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
一套PHP的笔试题
2013/05/31 面试题
UDP协议功能
2013/01/06 面试题
小学生考试获奖感言
2014/01/30 职场文书
《雷雨》教学反思
2014/02/20 职场文书
读书活动总结
2014/04/28 职场文书
田径运动会通讯稿
2014/09/13 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python