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

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

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

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

[html]
<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> 

<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這個方法不是真正要調用的方法，隻是一個過渡方法而已。

[javascript]
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); 
    } 
     

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

後綴：|https://10.20.1.54:7001/cssServerportal222012/|||||02

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

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

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

[javascript]
$(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;   
    }    

$(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的值當然也要發生變化：

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

switchYear=function(year){
   setCookie("Year",year);
}根據用戶的要求，一定要讓2014作為默認。每次切換完cookie操作完成之後，關閉瀏覽器，重新打開登錄進入首頁，年度依然要是2014，而不是上次切換的那個值。所以我們就不需要設定cookie的過期時間瞭，隻需要讓其在瀏覽器關閉後自動清除即可。

當然瞭，如果期望瀏覽器長期記住cookie，就設定過期時間，setCookie中的註釋代碼正是設置過期時間用的。感興趣的可以研究下。