JS操做cookie

cookie是瀏覽器 提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。能夠由JavaScript對其進行控制，而並非JavaScript自己的性質。

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

1、設置cookie 

一、單個cookie

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

二、多個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值。

2、獲取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>

3、給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> 

4、刪除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> 

5、指定可訪問cookie的路徑 

一、默認狀況下，若是在某個頁面建立了一個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訪問。 

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

三、若是要使cookie在整個網站下可用，能夠將cookie_dir指定爲根目錄:   document.cookie="userId=320; path=/";  

四、指定可訪問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。

6、構造通用的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>