利用JavaScript操作Cookie实现动态参数与年度切换持久化

利用JavaScript操作Cookie实现动态参数与年度切换持久化

为了清晰阐述这一技术方案，我们需要从基础背景开始梳理。

首先，后台配置了一个名为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对该字符串进行处理。

该字符串最终将作为JavaScript方法的参数传入，例如以下场景：

 
<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参数。首先，通过replace将字符串中的username替换为${user.username}，从而在JS层面动态解析出当前用户名。若年度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>

基于Cookie的年度状态持久化方案

此时面临一个新问题：当年度从默认的2014切换到2013后，若刷新页面，年度会重新变回默认的2014。由于刷新页面会导致所有变量重新加载，设置全局变量已无法解决问题。那么，是否存在一种不随页面刷新而丢失且易于操作的数据存储方式？正如标题所示，答案便是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函数中的注释代码正是用于设置过期时间的示例，感兴趣者可进一步研究。