在JavaScript中讀寫cookie程式碼

在JavaScript中處理cookie有些複雜，因為其眾所周知的蹩腳的接口，即BOM的doucment.cookie屬性。這個屬性的獨特之處在於它會因為使用它的方式不同而表現出不同的行為。當用來取得屬性值時，document.cookie傳回目前頁面可用的(根據cookie的網域、路徑、失效時間和安全設定)所有cookie的字串，一系列分號隔開的名-值對，如下例所示：

 

　　

name1=value1;name2=value2;name3=value3;

1 　　所有名字和值都是經過URLURLLdecodeURIUent)來編碼所有名稱的

　　當用於設定的時候，document.cookie屬性可以設定為一個新的cookie字串。這個cookie字串會被解釋並加入到現有的 cookie集合中。設定document.cookie並不會覆蓋cookie除非設定的cookie的名稱已經存在。設定cookie的格式如下，和set-Cookie頭中使用的一樣的格式：

　　

name=value; expires=expiration_time; path=domian_path; domian=domain_nam

　必須的。以下是一個簡單的例子：

　　

document.cookie = "name=Nicholas";

　　這段程式碼建立了一個叫做name的cookie，值為Nicholas。當客戶端每次向伺服器端發送請求的時候，都會發送這個cookie；當瀏覽器關閉的時候，它就會被刪除。雖然這段程式碼沒問題，但因為這裡剛好名稱和值都不需要進行編碼，所以最好每次設定cookie時都像下面這個範例一樣使用

　　

encodeURIComponent();

　　唯一.M.codeURIComponent();

　　唯一.S. ("name") + "=" + encodeURIComponent("Nicholas");

　　要給被建立的cookie指定額外的信息，只要將參數追加到該字串，和Set-Cookie頭中的格式一樣，如下：

　　

document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";讀寫cookie不是非常直觀，我們常寫一些函數來簡化cookie的功能。基本的cookie操作有三種：讀取、寫入和刪除。它們在CookieUtil物件中如下表示：

var CookieUtil = {
    get: function (name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1) {
            var cookieEnd = document.cookie.indexOf(";", cookieStart)
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    },
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += "; path=" + path;
        }
        if (domain) {
            cookieText += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    unset: function (name, path, domain, secure) {
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

CookieUtil.get()方法根據cookie的名字取得對應的值。他是透過在document.cookie字串中尋找cookie名加上等於號的位置。如果找到了，那麼使用indexOf()來找出該位置之後的第一個分號（表示了該cookie的結束位置）。如果沒有找到分號，則表示該 cookie是字串中的最後一個，則網域下的字串都是cookie的值。該值使用decodeURIComponent()進行解碼並最後回傳。如果沒有發現Cookie，則傳回null。
CookieUtil.set()方法在頁面上設定了一個cookie，接受幾個參數：cookie的名稱，cookie的值，可選的用於指定cookie何時應該被刪除的Date對象，cookie的可選的URL路徑，可選的域，以及可選的表示是否要新增secure標誌的Boolean值。參數是按照它們使用頻率的多寡來排列的，只有前兩個是必須的。在這個方法中，名稱和值都使用encodeURIComponent()進行了URL編碼，並檢查其它選項。如果expires參數是Date對象，那麼就會使用Date對象的toGMTString()方法正確格式化Date對象，並加入到 expires選項上。方法的其它部分是建構cookie字串並將其設定到document.cookie中。
沒有刪除現存cookie的直接方法。所以，需要使用相同的路徑、網域和安全選項再次設定cookie，並將失效時間設定為過去的時間。 CookieUtil.unset()方法可以處理這種事情。它接受4個參數：要刪除的cookie的名稱，可選的路徑參數，可選的域參數以及可選的安全參數。這些參數加上空字串並設定失效時間為1970年1月1日（初始化為0ms的Date物件的值），傳給CookieUtil.set()。這樣就能確保cookie被刪除。

這些方法可以如下使用：

//设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional <a href="http://www.php1.cn/">JavaScript</a>");
//读值
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book")
//设置1个cookie，包括它的路径、域、截止日期
CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com", new Date("January 1, 2010"));
//删除同一cookie
CookieUtil.unset("name", "/books/projs/", "www.wrox.com");
//设置1个<a href="http://www.php1.cn/category/23.html">安全</a>cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);

這些方法透過處理解析、建構cookie字串的任務令在客戶端利用cookie儲存資料更加簡單