使用js操作cookie的一點小收穫分享_javascript技巧

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

先從後台配置一個參數，放到一個欄位裡，該欄位叫做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方法的參數的，例如：

複製程式碼

複製程式碼

程式碼如下:

[/#if] path="${c.path}" onclick= "clickClient(this.path,this.keywords);">

${c.name}

clickClient這個方法不是真正要呼叫的方法，只是一個過渡方法而已。

複製程式碼

程式碼如下:


clickClient = function(lick,,keys)> //解析分解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中取出年度，然後和前綴後綴拼接起來，這樣就是實現了年度可變更的靈活性。 複製程式碼

代碼如下:


年度切換



年度切換

2012
2013
2014
2015

這時候會有一個問題，當年度切換之後，例如預設的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);
}
setCookie("Year",year);

}
}

依照使用者的要求，一定要讓2014作為預設。每次切換完cookie作業完成之後，關閉瀏覽器，重新開啟登入進入首頁，年度仍要是2014，而不是上次切換的那個值。所以我們就不需要設定cookie的過期時間了，只需要讓其在瀏覽器關閉後自動清除即可。 當然了，如果期望瀏覽器長期記住cookie，就設定過期時間，setCookie中的註解程式碼正是設定過期時間用的。有興趣的可以研究下。