javaScript操作Cookie方法

什麼是Cookie

「cookie 是儲存於訪客的電腦中的變數。每當同一台電腦透過瀏覽器要求某個頁面時，就會傳送這個cookie。你可以使用JavaScript 來建立和取回cookie 的值。

從JavaScript的角度來看，cookie 就是一些字串資訊。這些資訊存放在客戶端的電腦中，用於客戶端電腦與伺服器之間傳遞訊息。

在JavaScript中可以透過 document.cookie 來讀取或設定這些資訊。由於 cookie 多用在客戶端和服務端之間進行通信，除了JavaScript以外，服務端的語言（如PHP）也可以存取 cookie。

Cookie 基礎知識

cookie 是有大小限制的，每個 cookie 所存放的資料不能超過4kb，如果 cookie 字串的長度超過4kb，則該屬性將傳回空字串。

由於 cookie 最終都是以文件形式存放在客戶端電腦中，所以查看和修改 cookie 都是很方便的，這就是為什麼常說 cookie 不能存放重要資訊的原因。

每個 cookie 的格式都是這樣的：=；名稱和值都必須是合法的標示符。

cookie 是存在 有效期限的。在預設情況下，一個 cookie 的生命週期就是在瀏覽器關閉的時候結束。如果想要 cookie 能在瀏覽器關掉之後還可以使用，就必須為該 cookie 設定有效期，也就是 cookie 的失效日期。

alert(typeof document.cookie)　　結果是 string，曾經我以為是array，還鬧過笑話…囧

cookie 有域和路徑這個概念。域就是domain的概念，因為瀏覽器是個注意安全的環境，所以不同的域 之間是不能互相訪問 cookie 的(當然可以透過特殊設定的達到 cookie 跨域訪問)。路徑就是routing的概念，一個網頁所創建的cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問，而不能被其他目錄下得網頁訪問（這句話有點繞，一會兒看個例子就好理解了）。

其實建立cookie的方式和定義變數的方式有些相似，都需要使用 cookie 名稱和 cookie 值。同個網站可以建立多個 cookie ，而多個 cookie 可以存放在同一個cookie 檔案中。

Cookie常見問題

cookie 有兩種類型：

你瀏覽的當前網站本身設定的cookie

來自在網頁上嵌入廣告或圖片等其他網域來源的第三方cookie (網站可透過使用這些cookie 來追蹤你的使用資訊)

剛剛基礎知識裡面有說到cookie 生命週期的問題，其實cookie 大致可分為兩種狀態：

臨時性質的cookie。目前使用的過程中網站會儲存一些你的個人信息，當瀏覽器關閉後這些信息也會從計算機中刪除

設定失效時間的cookie。就算瀏覽器關閉了，這些資訊產業依然會在電腦中。如 登入名稱和密碼，這樣無須在每次到特定網站時都會登入。這種cookie 可在電腦中保留幾天、幾個月甚至幾年

cookie 有兩種清除方式：

透過瀏覽器工具清除cookie (有第三方的工具，瀏覽器本身也有這種功能)

透過設定cookie 的有效期限來清除cookie

註：刪除cookie 有時可能導致某些網頁無法正常運作

瀏覽器可以透過設定來接受和拒絕存取cookie。

出於功能和效能的原因考慮，建議盡量降低 cookie 的使用數量，並且要盡量使用小 cookie。

關於cookie編碼的細節問題將會在cookie高級篇中單獨介紹。

假如是本機磁碟中的頁面，chrome的控制台是無法用JavaScript讀取和寫入操作 cookie 的，解決方法…換一個瀏覽器^_^。

Cookie基礎用法

一.簡單的存取操作

在使用JavaScript訪問cookie 時，必須要使用Document物件的cookie 屬性；一行程式碼介紹如何建立和修改一個cookie ：

ookie

= 'username=Darren';

   

以上程式碼中’username’表示 cookie 名稱，’Darren’表示這個名稱對應的值。假設 cookie 名稱並不存在，那麼就是建立一個新的 cookie；如果存在就是修改了這個 cookie 名稱對應的值。如果要多次建立 cookie ，請重複使用這個方法即可。

二.cookie的讀取操作

要精確的對 cookie 進行讀取其實很簡單，就是對字串進行操作。從w3school上copy這段程式碼來做分析：

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查询cookie是否为空，为空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1　　
　　　　　　if (c_start!=-1){
　　　　　　　　c_start=c_start + c_name.length+1　　//最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　
　　　　　　　　//其实我刚看见indexOf()第二个参数的时候猛然有点晕，后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。
　　　　　　　　//因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　
　　　　　　　　//通过substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基础，想了解的可以搜索下，在文章结尾处也会进行讲解cookie编码细节
　　　　　　}
　　　　}
　　　　return ""
　　}

當然想實作讀取cookie的方法還有不少，像是數組，正規等，這裡就不往細說了。

三.設定cookie的有效期限

文章中常出現的 cookie 的生命週期也就是有效期限和失效期，即 cookie 的存在時間。在預設的情況下，cookie 會在瀏覽器關閉的時候自動清除，但是我們可以透過expires來設定 cookie 的有效期限。語法如下：

document.cookie = "name=value;expires=date";

    上面程式碼中的date值為GMT(格林威治時間)格式的日期型字串，產生方式如下：

var _date = new Date();

_date.setDate(_date.getDate()+30);

_date.toGMTString();

透過new產生一個Date的實例，得到當前的時間；

getDate()方法得到當前本地月份中的某一天，接著加上30就是我希望這個cookie能過在本地保存30天；

接著透過setDate()方法來設定時間；

最後用toGMTString()方法把Date物件轉換為字串，並傳回結果

透過下面這個完整的函數來說明在建立cookie 的過程中我們需要注意的地方–從w3school複製下來的。創建一個在cookie 中儲存資訊的函數：

function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//使用方法：setCookie('username','Darren',30)

    

現在我們這個函數是按照天數來設定cookie的有效時間，如果想以其他單位（如：小時）來設置，那麼改變第三行程式碼即可：

exdate.setHours(exdate.getHours() + expiredays);

    

這樣設定以後的cookie有效期限就是依照小時為單位的。

常見問題中有提到清除 cookie 的兩種方法，現在要說的是使 cookie 失效，透過把有效期的時間設定為一個已過期的時間。既然已經有了設定有效期限的方法，那麼設定失效期的方法就請有興趣的朋友自己動手了^_^。下面繼續比較深的cookie話題。

Cookie 進階篇

一.cookie 路徑概念

在基礎知識中有提到 cookie 有域和路徑的概念，現在來介紹路徑在 cookie 中的作用。

cookie 一般都是因為使用者造訪頁面而建立的，可是並不是只有在建立 cookie 的頁面才可以存取這個 cookie。

預設情況下，只有與創建 cookie 的頁面在同一個目錄或子目錄下的網頁才可以訪問，這個是因為安全方面的考慮，造成不是所有頁面都可以隨意訪問其他頁面創建的 cookie。舉個例子：

在「http://www.jb51.net/Darren_code/」 這個頁面建立一個cookie，那麼在」/Darren_code/」這個路徑下的頁面如： 「http://www.jb51. net/Darren_code/archive/2011/11/07/Cookie.html」這個頁面預設就能取到cookie資訊。

可在預設情況下，「http://www.jb51.net」或「http://www.jb51.net/xxxx/」 就不可以存取這個cookie（光看沒用，實踐出真理^ _^）。

那麼如何讓這個 cookie 能被其他目錄或父級的目錄存取類，透過設定 cookie 的路徑就可以實現。例子如下：

document.cookie = "name=value;path=path"

document.cookie = "name=value;expires=date;path=path"

ookie  ookie  的路徑，最常用的例子就是讓cookie 在跟目錄下,這樣不管是哪個子頁面創建的cookie，所有的頁面都可以訪問到了:

document.cookie = "name=Darren;path=/" ;

   

二.cookie 域概念

路徑能解決在同一域下訪問cookie 的問題，咱們接著說cookie 實現同域之間訪問的問題。語法如下：

document.cookie = "name=value;path=path;domain=domain";

   

紅色的domain就是設定的 cookie 域的值。

例如 ”www.qq.com” 与 “sports.qq.com” 公用一个关联的域名”qq.com”，我们如果想让 “sports.qq.com” 下的cookie被 ”www.qq.com” 访问，我们就需要用到 cookie 的domain属性，并且需要把path属性设置为 “/”。例：

document.cookie = "username=Darren;path=/;domain=qq.com";

   

注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

三.cookie 安全性

通常 cookie 信息都是使用HTTP连接传递数据，这种传递方式很容易被查看，所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

所以 cookie 的这个属性的名称是“secure”，默认的值为空。如果一个 cookie 的属性为secure，那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下：

document.cookie = "username=Darren;secure"

    把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

注：就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以说到底，别把重要信息放cookie就对了，囧…

四.cookie 编码细节

原本来想在常见问题那段介绍cookie编码的知识，因为如果对这个不了解的话编码问题确实是一个坑，所以还是详细说说。

在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在一般情况下，cookie 信息的存储都是采用未编码的方式。所以，在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

document.cookie = name + "="+ escape (value);

    再看看基础用法时提到过的getCookie()内的一句：

return unescape(document.cookie.substring(c_start,c_end));

    这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。

个人代码

/*设置Cookie*/
function setCookie(c_name, value, expiredays, path, domain, secure) {　
 var exdate = new Date(); //获取当前时间　
 exdate.setDate(exdate.getDate() + expiredays);　 //过期时间　　
 document.cookie = c_name + "=" + //cookie名称
 escape(value) + //将cookie值进行编码
 ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + //设置过期时间
 ((path == null) ? '/' : ';path=' + path) + //设置访问路径
 ((domain == null) ? '' : ';domain=' + domain) + //设置访问域
 ((secure == null) ? '' : ';secure=' + secure);　 //设置是否加密
};
setCookie('test', 'name=sheng;sex=men;lancer=dullbear', 30);
setCookie('bb', 'name=sheng;sex=men', 30);
/*获取Cookie*/
function getCookie(c_name, index) {
 var cookies = document.cookie; //获取cookie值
 var cookieLen = cookies.length; //获取cookie长度
 if (cookieLen > 0) { //cookie不为空时
  var c_start = cookies.indexOf(c_name + '='); //查找需要cookie值在cookie中序号
  if (c_start > -1) { //cookie值存在时
   c_start += c_name.length + 1; //获取cookie值开始序列号
   var c_end = cookies.indexOf(';', c_start); //获取cookie值结束序列号
   if (c_end == -1) { //当cookie是最后一个时
    c_end = cookieLen; //设置cookie值结束序列号为cookie长度
   };
   var cookieStr = unescape(cookies.substring(c_start, c_end)); //获取解码cookie值
   var cookieObj = cookieStr.split(';'); //分割cookie值
   index = ((index == null) ? 0 : index); //判断index是否传值
   var goalObj = cookieObj[index]; //索引数组
   var goalStr = goalObj.split('=');
   var getcook = goalStr[1]; //获取需要取的cookie值
   return getcook;
  };
 } else {
  console.log('页面没有cookie');
 }
};
alert(getCookie('test', 0)); //打印查询cookie值