快捷導(dǎo)航

使用js操作cookie的一點小收獲分享

更新時間：2013年09月03日 15:12:00 作者：

js操作cookie想必大家并不陌生吧，本文積累了一點小經(jīng)驗，在此與大家分享下，希望對大家有所幫助

為了說清楚這個問題，必須從頭說起。

首先從后臺配置一個參數(shù)，放到一個字段里，該字段叫做keywords，這個參數(shù)的值叫做efmis://|efmfj|username|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012/|||||02，姑且不去管這個值有什么含義，相信很多人都遇到過比這個更復(fù)雜的字符串。后臺配置以后，前臺可以這么來顯示：${tag_bean.keywords}，可以肯定，無論后臺配置成什么，前臺一定會原定不變的顯示出來，第一個問題出現(xiàn)：在username這個位置上，嵌入的是當(dāng)前登錄用戶的用戶名，必須是動態(tài)代碼。難道要寫成efmis://|efmfj|${username}|2200|0||2014|http://10.20.1.54:7001/cssServerportal222012？這樣寫跟期望可有所不同，它會原樣不變的顯示出來，并不會把EL表達(dá)式翻譯成動態(tài)代碼，暫時不考慮能不能使用EL表達(dá)式的嵌套，很顯然不能直接使用，一定要要處理這么一個字符串。

這個字符串是要作為一個js方法的參數(shù)的，例如：

復(fù)制代碼代碼如下:

 
<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這個方法不是真正要調(diào)用的方法，只是一個過渡方法而已。

復(fù)制代碼代碼如下:

 
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結(jié)束 
//合并url 
keywords = prefix+$("#year").val()+suffix; 
clientInvoke(path,keywords); 
} 

在這個方法，最終實現(xiàn)的目的是調(diào)用clientInvoke方法，而傳進(jìn)去的參數(shù)keywords是變化，要經(jīng)過一定的處理，首先把${user.username}把user替換掉，在js代碼中，即使含有EL表達(dá)式也會動態(tài)的解析出來，這點就實現(xiàn)了動態(tài)的調(diào)用當(dāng)前用戶名的目標(biāo)。當(dāng)2014這個年度也要設(shè)置為動態(tài)的，并且是可以切換的，那就要把該字符串分解成三個部分：

前綴：efmis://|efmfj|username|2200|0||

年度：2014

后綴：|http://10.20.1.54:7001/cssServerportal222012/|||||02

把年度放在一個select下拉菜單中，當(dāng)觸動clickClient方法時，即時的從當(dāng)前option中取出年度，然后和前綴后綴拼接起來，這樣就是實現(xiàn)了年度可變化的靈活性。

復(fù)制代碼代碼如下:

 
年度切換 
<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> 

這時候會有一個問題，當(dāng)年度切換之后，比如默認(rèn)的2014，切換到2013之后，如果刷新頁面，就會重新變回默認(rèn)的2014，這個該怎么辦呢？刷新之后所有的變量都重新加載了，所以設(shè)置全局變量這個方法就行不通了，那么我們要問，什么東西是不隨著頁面刷新而變化并且我們很容易進(jìn)行操作的？看到本文的標(biāo)題我想所有人都會知道了:cookie!

cookie是保存在本地的資源，可以隨存隨取，在記住密碼的功能上起了極大的作用。這時候我們就利用cookie，把年度存在cookie中。每次加載頁面時，判斷cookie是否存在，如果存在就從中取出放入select，如果不存在就從select中取出，存入cookie。

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
if(getCookie("Year")==null){//不存在該cookie，放進(jìn)去 
setCookie("Year",$("#year").val()); 
}else{ 
//已經(jīng)存在該cookie，則從中取出 
$("#year").val(getCookie("Year")); 
} 
}); 
//設(shè)置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的值當(dāng)然也要發(fā)生變化：

復(fù)制代碼代碼如下:

 
switchYear=function(year){ 
setCookie("Year",year); 
} 

根據(jù)用戶的要求，一定要讓2014作為默認(rèn)。每次切換完cookie操作完成之后，關(guān)閉瀏覽器，重新打開登錄進(jìn)入首頁，年度依然要是2014，而不是上次切換的那個值。所以我們就不需要設(shè)定cookie的過期時間了，只需要讓其在瀏覽器關(guān)閉后自動清除即可。

當(dāng)然了，如果期望瀏覽器長期記住cookie，就設(shè)定過期時間，setCookie中的注釋代碼正是設(shè)置過期時間用的。感興趣的可以研究下。

您可能感興趣的文章: