JS操作Cookie

我們已經知道，在 document 對象中有一個 cookie 屬性。但是 Cookie 又是什么？“某些 Web 站點在您的硬盤上用很小的文本文件存儲了一些信息，這些文件就稱為 Cookie。”—— MSIE 幫助。一般來說，Cookies 是 CGI 或類似，比 HTML 高級的文件、程序等創建的，但是 JavaScript 也提供了對 Cookies 的很全面的訪問權利。
在繼續之前，我們先要學一學 Cookie 的基本知識。
每個 Cookie 都是這樣的：cookie名=cookie值；cookie本身僅僅是一個字符串，是一組名值對；多組名值對用分號加空格分隔！
"cookie名"的限制與 JavaScript 的命名限制大同小異，少了“不能用 JavaScript 關鍵字”，多了“只能用可以用在 URL 編碼中的字符”。后者比較難懂，但是只要你只用字母和數字命名，就完全沒有問題了。“值”的要求也是“只能用可以用在 URL 編碼中的字符”。
每個 Cookie 都有失效日期，一旦電腦的時鐘過了失效日期，這個 Cookie 就會被刪掉。我們不能直接刪掉一個 Cookie，但是可以用設定失效日期早于現在時刻的方法來間接刪掉它。
每個網頁，或者說每個站點，都有它自己的 Cookies，這些 Cookies 只能由這個站點下的網頁來訪問，來自其他站點或同一站點下未經授權的區域的網頁，是不能訪問的。每一“組”Cookies 有規定的總大小（大約 2KB 每“組”），一超過最大總大小，則最早失效的 Cookie 先被刪除，來讓新的 Cookie“安家”。
訪問Cookie
document.write(document.cookie);//輸出類似"name1=value1; name2=value2; name3=value3"的字符串
document.write(typeof document.cookie);//cookie僅僅是個字符串
但這樣獲取到的是一堆混亂的字符串，必須對其進行處理才能知道它的含義！在類似ASP或PHP這樣的服務器端腳本中，往往設置cookie十分簡單
//ASP
response.cookies("cookieName")="cookieValue"
//PHP
setcookie("cookieName","cookieValue");
解析Cookie名值對
方案一：直接截取字符串

function getCookie(cookieName) {
var start = document.cookie.indexOf(cookieName+"=");
if (start ==-1) {return "";}
start = start+cookieName.length+1;
var end = document.cookie.indexOf(";",start);
if (end=-1) {end = document.cookie.length;}
return document.cookie.substring(start,end);
}

方案二：將Cookie拆分為數組，通過遍歷取得

function getCookie(cookieName) {
var cookies=document.cookie.split("; ");//一個分號加一個空格
if (!cookies.length) {return "";}
var pair=["",""];
for (var i=0;i< cookies.length;i++) {
pair = cookies[i].split("=");//以賦值號分隔,第一位是Cookie名,第二位是Cookie值
if (pair[0]==cookieName) {
break;
}
}
return pair[1];
}

方案三：使用正則表達式解析

function getCookie(cookieName) {
var re = new RegExp("\\b"+cookieName+"=([^;]*)\\b");
var arr =  re.exec(document.cookie);
return arr?arr[1]:"";
}

設置Cookie
一個Cookie包含以下信息：
? Cookie名稱，Cookie名稱必須使用只能用在URL中的字符，一般用字母及數字
? Cookie值，Cookie值同樣也只能使用可以用在URL中的字符，一般需要在設置Cookie值時對其使用encodeURI方法進行轉義
? Expires，過期日期，一個GMT格式的時間，當過了這個日期之后，瀏覽器就會將這個Cookie刪除掉，當不設置這個的時候，Cookie在瀏覽器關閉后消失
? Path，一個路徑，在這個路徑下面的頁面才可以訪問該Cookie，一般設為“/”，以表示同一個站點的所有頁面都可以訪問這個Cookie
? Domain，子域，指定在該子域下才可以訪問Cookie，例如要讓Cookie在bbs.x-life.com下可以訪問，但在news.x-life.com下不能訪問，則可將domain設置成bbs.x-life.com
? Secure，安全性，指定Cookie是否只能通過https協議訪問，一般的Cookie使用HTTP協議既可訪問，如果設置了Secure（沒有值），則只有當使用https協議連接時cookie才可以被頁面訪問

注意：Cookie安全機制要求站點頁面只能訪問本站點的Cookie，不能訪問其它站點的Cookie。同時，最好在設置Cookie時使用encodeURI對象進行URI編碼，在取出Cookie時再使用decodeURI對其進行解碼！ 

 

設置一個完整Cookie示例

var expires = new Date();
expires.setMonth(expires.getMonth()+1);//一個月后Cookie失效
document.cookie = "userName="+encodeURI("用戶名")+"; expires="+
expires.toGMTString()+"; path=/; domain=x-life.com; secure";
每次設置document.cookie值時如果該Cookie名稱并不存在，則新增一個Cookie，如果已經存在，則修改以前的值！
document.cookie ="a=1";//新增一個名稱為a的Cookie
document.cookie = "b=2";//新增一個名稱為b的Cookie，原來的Cookie安然無恙
document.cookie = "a=3";//將原來的名稱為a的Cookie值修改為3
setCookie函數
function setCookie(name,value,expires,domain,secure) {
var str = name+"="+encodeURI(value);//不要忘了在對應getCookie函數里面加上decodeURI方法
if (expires) {
str += "; expires="+expires.toGMTString();
}
if (path) {
str += "; path="+path;
}
if (domain) {
str += "; domain="+domain;
}
if (secure) {
str += "; secure";
}
document.cookie = str;
}
刪除Cookie
沒有刪除Cookie的直接的方法，但可以變通一下來刪除Cookie！
function delCookie(cookieName) {
var expires = new Date();
expires.setTime(expires.getTime()-1);//將expires設為一個過去的日期，瀏覽器會自動刪除它
document.cookie = cookieName+"=; expires="+expires.toGMTString();
}