JS操作cookie

cookie是瀏覽器 提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而並不是JavaScript本身的性質。

cookie是存於用戶硬盤的一個文件，這個文件通常對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。因此，cookie可以跨越一個域名下的多個網頁，但不能跨越多個域名使用。 

一、設置cookie 

1、單個cookie

每個cookie都是一個名/值對，可以把下面這樣一個字符串賦值給document.cookie：   document.cookie="userId=828"; 

2、多個cookie

如果要一次存儲多個名/值對，可以使用分號加空格（; ）隔開，例如： document.cookie="userId=828; userName=hulk"; 

但是，在cookie 的名或值中不能使用分號（;）、逗號（,）、等號（=）以及空格。在cookie的名中做到這點很容易，但要保存的值是不確定的。如何來存儲這些值呢？

方法是：用escape()函數進行編碼，它能將一些特殊符號使用十六進制表示，例如空格將會編碼為“20%”，從而可以存儲於cookie值中，而且使用此種方案還可以避免中文亂碼的出現。

例：document.cookie="str="+escape("I love ajax");    相當於：  document.cookie="str=I%20love%20ajax"; 

使用escape()編碼后，在取出值以后需要使用 unescape()進行解碼 才能得到原來的cookie值。

二、獲取cookie的值

cookie的值可以由document.cookie直接獲得：  var strCookie=document.cookie; 

 如果要獲取指定的cookie值，須自己分析這個字符串：

<script type="text/javascript">
        //設置兩個cookie
        //給document.cookie賦值像執行類似這樣的語句：document.addCookie("userId=828"); document.addCookie("userName=hulk");
        document.cookie = "userId=828";
        document.cookie = "userName=hulk";        //改變它的賦值，原來的賦值不會丟失，瀏覽器同時維護兩個cookie       
        var strCookie = document.cookie;    // 獲取cookie字符串 // alert(strCookie);               ////  userId=828；userName=hulk
        var arrCookie = strCookie.split(";");        //從分號的位置 分割字符串strCookie為字符串數組
       // alert(arrCookie);               ////  userId=828，userName=hulk     數組:["userId=828","userName=hulk"]
        var userId;
        //遍歷cookie數組，處理每個cookie對
        for(var i=0;i<arrCookie.length;i++){

            var arr = arrCookie[i].split("=");           //從 = 的位置 分割每對cookie

            if( arr[0] == "userId" ){      //如果前面是 userId 就是找到了
                userId = arr[1];         //將后面的值賦給 userId ，跳出循環
                break;
            }
        }
        alert(userId);
    </script>

三、給cookie設置終止日期

到現在為止，所有的cookie都是單會話cookie，即瀏覽器關閉后這些cookie將會丟失，事實上這些cookie僅僅是存儲在內存中，而沒有建立相應的硬盤文件。在實際開發中，cookie常常需要長期保存，例如保存用戶登錄的狀態。

方法如下：

<script language="JavaScript" type="text/javascript"> 

      var date=new Date();     //獲取當前時間 
      var expiresDays = 10; 

      date.setTime( date.getTime() + expiresDays*24*3600*1000 );    //將date設置為當前時間后的10天

      //將userId和userName兩個cookie設置為10天后過期 
      document.cookie = "userId=828;userName=hulk;expires="+date.toGMTString(); 

</script> 

四、刪除cookie

為了刪除一個cookie，可以將其過期時間設定為一個過去的時間，例如：

<script type="text/javascript"> 

var date=new Date();    //獲取當前時間 

date.setTime(date.getTime()-10000);    //將date設置為過去的時間

//將userId這個cookie刪除 
document.cookie="userId=828; expires="+date.toGMTString(); 

</script> 

五、指定可訪問cookie的路徑 

1、默認情況下，如果在某個頁面創建了一個cookie，那么該頁面所在目錄中的其他頁面也可以訪問該cookie。如果這個目錄下還有子目錄，則在子目錄中也可以訪問。例如在www.xxxx.com/html/a.html中所創建的cookie，可以被www.xxxx.com/html/b.html或www.xxx.com/ html/ some/c.html所訪問，但不能被www.xxxx.com/d.html訪問。 

2、為了控制cookie可以訪問的目錄，需要使用path參數設置cookie，語法： document.cookie="name=value; path=cookieDir";     （   cookieDir表示可訪問cookie的目錄  ）
eg:     document.cookie="userId=320; path=/shop";        表示當前cookie僅能在shop目錄下使用。

3、如果要使cookie在整個網站下可用，可以將cookie_dir指定為根目錄:   document.cookie="userId=320; path=/";  

4、指定可訪問cookie的主機名和路徑類似，主機名是指同一個域下的不同主機，例如：www.google.com和gmail.google.com就是兩個不同的主機名。

默認情況下，一個主機中創建的cookie在另一個主機下是不能被訪問的，但可以通過domain參數來實現對其的控制，其語法格式為： document.cookie="name=value; domain=cookieDomain"; 
以google為例，要實現跨主機訪問，可以寫為： document.cookie="name=value;domain=.google.com";    這樣，所有google.com下的主機都可以訪問該cookie。

六、構造通用的cookie處理函數

定義幾個函數來完成cookie的通用操作，從而實現代碼的復用。下面列出了常用的cookie操作及其函數實現：

1．添加一個cookie：   addCookie(name,value,expiresHours) 
該函數接收3個參數：cookie名稱，cookie值，以及在多少小時后過期。這里約定expiresHours為0時不設定過期時間，即當瀏覽器關閉時cookie自動消失。如下：

<script type="text/javascript"> 

function addCookie(name,value,expiresHours){ 

   var cookieString=name+"="+escape(value); 

   if(expiresHours>0){    //判斷是否設置過期時間 
     var date=new Date(); 
     date.setTime(date.getTime+expiresHours*3600*1000); 
     cookieString=cookieString+"; expires="+date.toGMTString(); 
   } 

   document.cookie=cookieString; 

} 
</script> 

2．獲取指定名稱的cookie值：getCookie(name) 
該函數返回名稱為 name 的 cookie 值，如果不存在則返回空，如下： 

<script type="text/javascript"> 

function getCookie(name){ 

   var strCookie=document.cookie; 

   var arrCookie=strCookie.split("; "); 

   for(var i=0;i<arrCookie.length;i++){ 

        var arr=arrCookie[i].split("="); 
        if(arr[0]==name)return arr[1]; 

    } 

return ""; 

} 
</script> 

3．刪除指定名稱的cookie：deleteCookie(name) 
該函數可以刪除指定名稱的cookie，如下： 

<script type="text/javascript"> 

   function deleteCookie(name){ 

        var date=new Date(); 

        date.setTime(date.getTime()-10000); 

        document.cookie=name+"=v; expires="+date.toGMTString(); 

    } 

</script>