一、什麼是cookie
我們在瀏覽器中，經常涉及到數據的交換，比如你登錄郵箱，登錄一個頁面。我們經常會在此時設置30天內記住我，或者自動登錄選項。那麼它們是怎麼記錄信息的呢，答案就是今天的主角cookie了，Cookie是由HTTP服務器設置的，保存在瀏覽器中，但HTTP協議是一種無狀態協議，在數據交換完畢後，服務器端和客戶端的鏈接就會關閉，每次交換數據都需要建立新的鏈接。
從JavaScript的角度看，cookie 就是一些字符串信息。這些信息存放在客戶端的計算機中，用於客戶端計算機與服務器之間傳遞信息。
在JavaScript中可以通過 document.cookie 來讀取或設置這些信息。由於 cookie 多用在客戶端和服務端之間進行通信，所以除了JavaScript以外，服務端的語言（如PHP）也可以存取 cookie。
**
二、cookie的基礎知識
cookie 是有大小限制的，每個 cookie 所存放的數據不能超過4kb，如果 cookie 字符串的長度超過4kb，則該屬性將返回空字符串。
由於 cookie 最終都是以文件形式存放在客戶端計算機中，所以查看和修改 cookie 都是很方便的，這就是爲什麼常說 cookie 不能存放重要信息的原因。
每個 cookie 的格式都是這樣的：<cookie名>=<值>；名稱和值都必須是合法的標示符。
cookie 是存在 有效期的。在默認情況下，一個 cookie 的生命週期就是在瀏覽器關閉的時候結束。如果想要 cookie 能在瀏覽器關掉之後還可以使用，就必須要爲該 cookie 設置有效期，也就是 cookie 的失效日期。
alert(typeof document.cookie) 結果是 string
cookie 有域和路徑這個概念。域就是domain的概念，因爲瀏覽器是個注意安全的環境，所以不同的域之間是不能互相訪問 cookie 的(當然可以通過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念，一個網頁所創建的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問，而不能被其他目錄下得網頁訪問。
其實創建cookie的方式和定義變量的方式有些相似，都需要使用 cookie 名稱和 cookie 值。同個網站可以創建多個 cookie ，而多個 cookie 可以存放在同一個cookie 文件中。
三、關於cookie中的屬性
1、Path – 路徑
指定與cookie關聯的WEB頁。
值可以是一個目錄，或者是一個路徑。
如果http://www.china.com/test/index.html 建立了一個cookie，那麼在http://www.china.com/test/目錄裏的所有頁面，以及該目錄下面任何子目錄裏的頁面都可以訪問這個cookie。
這就是說，在http://www.china.com/test/test2/test3 裏的任何頁面都可以訪問http://www.china.com/test/index.html建立的cookie。
但是，如果http://www.china.com/test/ 需要訪問http://www.china.com/test/index.html設置的cooke，該怎麼辦？
這時，我們要把cookie的path屬性設置成“/”。在指定路徑的時候，凡是來自同一服務器，URL裏有相同路徑的所有WEB頁面都可以共享cookie。
2、Domain – 域
指定關聯的WEB服務器或域。
值是域名，比如www.china.com。這是對path路徑屬性的一個延伸。如果我們想讓 www.china.com能夠訪問bbs.china.com設置的cookie，該怎麼辦? 我們可以把domain屬性設置成“china.com”，並把path屬性設置成“/”。
3、Secure – 安全
指定cookie的值通過網絡如何在用戶和WEB服務器之間傳遞。
這個屬性的值或者是“secure”，或者爲空。缺省情況下，該屬性爲空，也就是使用不安全的HTTP連接傳遞數據。如果一個 cookie 標記爲secure，那麼，它與WEB服務器之間就通過HTTPS或者其它安全協議傳遞數據。不過，設置了secure屬性不代表其他人不能看到你機器本地保存的cookie。換句話說，把cookie設置爲secure，只保證cookie與WEB服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。如果想讓本地cookie也加密，得自己加密數據。
4.Expires – 過期時間
指cookie的生命期，確切地說是過期日期。
如果想讓cookie的存在期限超過當前瀏覽器的會話時間，就必須使用這個屬性。當過了到期日期時，瀏覽器會自動刪除cookie文件。
四、cookie基礎用法
1.設置cookie
在使用JavaScript存取 cookie 時，必須要使用Document對象的 cookie 屬性；一行代碼介紹如何創建和修改一個 cookie ：
document.cookie = 'username=Darren'
1
如果要一次存儲多個名/值對，可以使用分號加空格（; ）隔開，例如：
document.cookie="userId=828; userName=hulk";
1
以上代碼中’username’表示 cookie 名稱，’Darren’表示這個名稱對應的值。假設 cookie 名稱並不存在，那麼就是創建一個新的 cookie；如果存在就是修改了這個 cookie 名稱對應的值。如果要多次創建 cookie ，重複使用這個方法即可。
在cookie的名或值中不能使用分號（;）、逗號（,）、等號（=）以及空格（需要使用escape()函數進行編碼）。
2.獲取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 ""
}
1
2
3
4
5
6
7
8
9
10
11
12
也可以使用分割字符串的方式進行判斷
//設置兩個cookie
document.cookie="userId=828";
document.cookie="userName=hulk";
//獲取cookie字符串
var strCookie=document.cookie;
//將多cookie切割爲多個名/值對
var arrCookie=strCookie.split("; ");
var userId;
//遍歷cookie數組，處理每個cookie對
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
//找到名稱爲userId的cookie，並返回它的值
if("userId"==arr[0]){
userId=arr[1];
break;
}
}
alert(userId);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
當然想實現讀取cookie的方法還有不少，比如數組，正則等，這裏就不往細說了。
（一般使用正則的方式相對比較簡單）
3.刪除cookie
爲了刪除一個cookie，可以將其過期時間設定爲一個過去的時間，例如：
//獲取當前時間
var date=new Date();
//將date設置爲過去的時間
date.setTime(date.getTime()-1);
//將userId這個cookie刪除
document.cookie="userId=828; expire="+date.toGMTString();
1
2
3
4
5
6
4.設置cookie有效時間
文章中常常出現的 cookie 的生命週期也就是有效期和失效期，即 cookie 的存在時間。在默認的情況下，cookie 會在瀏覽器關閉的時候自動清除，但是我們可以通過expires來設置 cookie 的有效期。語法如下：
document.cookie = "name=value;expires=date"
1
上面代碼中的date值爲GMT(格林威治時間)格式的日期型字符串，生成方式如下：
var _date = new Date();
_date.setDate(_date.getDate()+30);
_date.toGMTString();
1
2
3
上面三行代碼分解爲幾步來看：
通過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)
1
2
3
4
5
6
現在我們這個函數是按照天數來設置cookie的有效時間，如果想以其他單位（如：小時）來設置，那麼改變第三行代碼即可：
exdate.setHours(exdate.getHours() + expiredays);
1
這樣設置以後的cookie有效期就是按照小時爲單位的。
**
五、高級部分
**
1..cookie 路徑概念
在基礎知識中有提到 cookie 有域和路徑的概念，現在來介紹路徑在 cookie 中的作用。
cookie 一般都是由於用戶訪問頁面而被創建的，可是並不是只有在創建 cookie 的頁面纔可以訪問這個 cookie。
默認情況下，只有與創建 cookie 的頁面在同一個目錄或子目錄下的網頁纔可以訪問，這個是因爲安全方面的考慮，造成不是所有頁面都可以隨意訪問其他頁面創建的 cookie。舉個例子：
在 “http://www.cnblogs.com/Darren_code/” 這個頁面創建一個cookie，那麼在”/Darren_code/”這個路徑下的頁面如： “http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html“這個頁面默認就能取到cookie信息。
可在默認情況下， “http://www.cnblogs.com“或者 “http://www.cnblogs.com/xxxx/” 就不可以訪問這個 cookie（光看沒用，實踐出真理^_^）。
那麼如何讓這個 cookie 能被其他目錄或者父級的目錄訪問類，通過設置 cookie 的路徑就可以實現。例子如下：
document.cookie = "name=value;path=paths"
document.cookie = "name=value;expires=date;path=paths"
1
2
“paths”就是 cookie 的路徑，最常用的例子就是讓 cookie 在跟目錄下,這樣不管是哪個子頁面創建的 cookie，所有的頁面都可以訪問到了:
document.cookie = "name=Darren;path=/"
1
2.cookie 域概念
路徑能解決在同一個域下訪問 cookie 的問題，咱們接着說 cookie 實現同域之間訪問的問題。語法如下：
document.cookie = "name=value;path=path;domain=domains"
1
“domains”就是設置的 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"
1
注：一定的是同域之間的訪問，不能把domain的值設置成非主域的域名
3.cookie 安全性
通常 cookie 信息都是使用HTTP連接傳遞數據，這種傳遞方式很容易被查看，所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要，那麼就要求使用加密的數據傳輸。
所以 cookie 的這個屬性的名稱是“secure”，默認的值爲空。如果一個 cookie 的屬性爲secure，那麼它與服務器之間就通過HTTPS或者其它安全協議傳遞數據。語法如下：
document.cookie = "username=Darren;secure"
1
把cookie設置爲secure，只保證 cookie 與服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。如果想讓本地cookie也加密，得自己加密數據。
注：就算設置了secure 屬性也並不代表他人不能看到你機器本地保存的 cookie 信息，所以說到底，別把重要信息放cookie就對了，囧…
4.cookie 編碼細節
原本來想在常見問題那段介紹cookie編碼的知識，因爲如果對這個不瞭解的話編碼問題確實是一個坑，所以還是詳細說說。
在輸入cookie信息時不能包含空格，分號，逗號等特殊符號，而在一般情況下，cookie 信息的存儲都是採用未編碼的方式。所以，在設置 cookie 信息以前要先使用escape()函數將 cookie 值信息進行編碼，在獲取到 cookie 值得時候再使用unescape()函數把值進行轉換回來。如設置cookie時：
document.cookie = name + "="+ escape (value)
1
再看看基礎用法時提到過的getCookie()內的一句：
return unescape(document.cookie.substring(c_start,c_end))
1
這樣就不用擔心因爲在cookie值中出現了特殊符號而導致 cookie 信息出錯了。
