DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 使用js操作cookie的一點小收獲分享
使用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方法的參數的,例如:
復制代碼 代碼如下:
<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中的注釋代碼正是設置過期時間用的。感興趣的可以研究下。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved