JS 操作Cookie詳解

來源:小毅博客
Cookies，有些人喜歡它們，有些人憎恨它們。但是，很少有人真正知道如何使用它們?，F(xiàn)在你可以成為少數(shù)人中的成員－可以自傲的Cookie 大師。-->

如果你象作者一樣記性不好，那么你可能根本記不住人們的名字。我遇到人時，多半只是點點頭，問句“吃了嘛！”，而且期望問候到此為止。如果還需要表示些什么，那么我就得求助于一些狡猾的技巧，好讓我能想對方是誰。比如胡扯起一些和對方有關(guān)的人，不管他們之間關(guān)系多遠，只要能避免不記得對方名字的尷尬就好： “你隔壁鄰居的侄子的可愛小狗邁菲斯特怎么樣？”通過這個方法，我希望能讓對方感到，我確實很重視他（她），甚至還記得這些瑣事，雖然實際上連名字都忘記了。但是，不是我不重視，而是我的記憶力實在是糟糕，而且要記住的名字又實在太多。如果我能給每個人設(shè)置cookies，那么我就不會再犯這種記憶力問題了。

在這篇文章里，我們要學習：

1. 什么是 Cookies?
2. Cookie 的構(gòu)成
3. 操縱 Cookies
4. Cookie 怪獸

什么是Cookies?

你會問，什么是cookies呢? cookie 是瀏覽器保存在用戶計算機上的少量數(shù)據(jù)。它與特定的WEB頁或WEB站點關(guān)聯(lián)起來，自動地在WEB瀏覽器和WEB服務(wù)器之間傳遞。

比如，如果你運行的是Windows操作系統(tǒng)，使用Internet Explorer上網(wǎng)，那么你會發(fā)現(xiàn)在你的“Windows”目錄下面有一個子目錄，叫做“Temporary Internet Files”。如果你有空看看這個目錄，就會發(fā)現(xiàn)里面有一些文件，文件名稱看起來就象電子郵件地址。比如在我機器上的這個目錄里，就有 “jim@support.microsoft.com”這樣的文件。這是一個cookie 文件，這個文件從哪來呢？猜一猜，它來自微軟的支持站點。順便說一句，這不是我的電子郵件地址，特此澄清。

對于管理細小的、不重要的、不想保存在中央數(shù)據(jù)庫里的細節(jié)信息，Cookies 是個很不錯的方案。（這不是說大家的名字不重要。）比如，目前網(wǎng)站上不斷增長的自定義服務(wù)，可以為每個用戶定制他們要看的內(nèi)容。如果你設(shè)計的就是這樣一個站點，那么你怎么來管理這樣的信息：一個用戶喜歡綠色的菜單條，而另一個喜歡紅色的。確實是個累人的問題。不過，這樣的信息，可以很安全地記錄到cookie，并保存在用戶的計算機上，而你自己的數(shù)據(jù)庫空間可以留給更長久更有意義的數(shù)據(jù)。

FYI: Cookies 對于安全用途，通常很有用。我不想在此就這一問題過于深入，只是提供一個示例，可以看到如何使用在一段時間之后過期的cookies來保證站點安全：

1. 使用用戶名和口令，通過 SSL 登錄。
2. 在服務(wù)器的數(shù)據(jù)庫里檢查用戶名和口令。如果登錄成功，建立一個當前時間標簽的消息摘要 (比如 MD5) ，并把它保存在cookie和服務(wù)器數(shù)據(jù)庫里。把用戶的登錄時間保存在服務(wù)器數(shù)據(jù)庫里面的用戶記錄里。
3. 在進行每個安全事務(wù)時（用戶處于登錄狀態(tài)的任何事務(wù)），把cookie的消息摘要和保存在服務(wù)器數(shù)據(jù)庫里的摘要進行比較，如果比較失敗，就把用戶引導到登錄界面。
4. 如果第3步檢查通過，那么檢查當前時間和登錄時間之音經(jīng)過的時間是否超過允許的時間長度。如果用戶已經(jīng)超時，那么就把用戶引到登錄界面。
5. 如果第3步和第4步都通過了，那么把登錄時間重新設(shè)置成當前時間，允許事務(wù)發(fā)生。那些需要你登錄的安全站點，可能多數(shù)使用的都是和這里介紹的類似的方法。
Cookie的構(gòu)成

Cookies最初設(shè)計時，是為了CGI編程。但是，我們也可以使用Javascript腳本來操縱cookies。在本文里，我們將演示如何使用Javascript腳本來操縱cookies。(如果有需求，我可能會在以后的文章里介紹如何使用Perl進行cookie管理。但是如果實在等不得，那么我現(xiàn)在就教你一手：仔細看看CGI.pm。在這個CGI包里有一個cookie()函數(shù)，可以用它建立cookie。但是，還是讓我們先來介紹cookies的本質(zhì)。

在Javascript腳本里，一個cookie 實際就是一個字符串屬性。當你讀取cookie的值時，就得到一個字符串，里面當前WEB頁使用的所有cookies的名稱和值。每個cookie除了name名稱和value值這兩個屬性以外，還有四個屬性。這些屬性是： expires過期時間、 path路徑、 domain域、以及 secure安全。

Expires – 過期時間。指定cookie的生命期。具體是值是過期日期。如果想讓cookie的存在期限超過當前瀏覽器會話時間，就必須使用這個屬性。當過了到期日期時，瀏覽器就可以刪除cookie文件，沒有任何影響。

Path – 路徑。指定與cookie關(guān)聯(lián)的WEB頁。值可以是一個目錄，或者是一個路徑。如果http://www.jzxue.com/html/java/建立了一個cookie，那么在http://www.jzxue.com/html/java/目錄里的所有頁面，以及該目錄下面任何子目錄里的頁面都可以訪問這個cookie。這就是說，在http://www.jzxue.com/html/java/stories/articles 里的任何頁面都可以訪問http://www.jzxue.com/html/java/index.html建立的cookie。但是，如果http://www.jzxue.com/html/asp/ 需要訪問http://www.jzxue.com/html/java/index.html設(shè)置的cookes，該怎么辦？這時，我們要把cookies 的path屬性設(shè)置成“/”。在指定路徑的時候，凡是來自同一服務(wù)器，URL里有相同路徑的所有WEB頁面都可以共享cookies?，F(xiàn)在看另一個例子：如果想讓 http://www.jzxue.com/devhead/filters/ 和http://www.jzxue.com/devhead/stories/共享cookies，就要把path設(shè)成“/devhead”。

Domain – 域。指定關(guān)聯(lián)的WEB服務(wù)器或域。值是域名，比如jzxue.com。這是對path路徑屬性的一個延伸。如果我們想讓 catalog.mycompany.com 能夠訪問shoppingcart.mycompany.com設(shè)置的cookies，該怎么辦? 我們可以把domain屬性設(shè)置成“mycompany.com”，并把path屬性設(shè)置成“/”。FYI：不能把cookies域?qū)傩栽O(shè)置成與設(shè)置它的服務(wù)器的所在域不同的值。

Secure – 安全。指定cookie的值通過網(wǎng)絡(luò)如何在用戶和WEB服務(wù)器之間傳遞。這個屬性的值或者是“secure”，或者為空。缺省情況下，該屬性為空，也就是使用不安全的HTTP連接傳遞數(shù)據(jù)。如果一個 cookie 標記為secure，那么，它與WEB服務(wù)器之間就通過HTTPS或者其它安全協(xié)議傳遞數(shù)據(jù)。不過，設(shè)置了secure屬性不代表其他人不能看到你機器本地保存的cookie。換句話說，把cookie設(shè)置為secure，只保證cookie與WEB服務(wù)器之間的數(shù)據(jù)傳輸過程加密，而保存在本地的cookie文件并不加密。如果想讓本地cookie也加密，得自己加密數(shù)據(jù)。

操縱Cookies

請記住，cookie就是文檔的一個字符串屬性。要保存cookie，只要建立一個字符串，格式是name=（名稱＝值），然后把文檔的 document.cookie 設(shè)置成與它相等即可。比如，假設(shè)想保存表單接收到的用戶名，那么代碼看起來就象這樣：

document.cookie = "username" + escape(form.username.value);

在這里，使用 escape() 函數(shù)非常重要，因為cookie值里可能包含分號、逗號或者空格。這就是說，在讀取cookie值時，必須使用對應(yīng)的unescape()函數(shù)給值解碼。
我們當然還得介紹cookie的四個屬性。這些屬性用下面的格式加到字符串值后面：

name=[; expires=][; domain=][; path=][; secure]

名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]

, , 和 應(yīng)當用對應(yīng)的值替換。 應(yīng)當使用GMT格式，可以使用Javascript腳本語言的日期類Date的.toGMTString() 方法得到這一GMT格式的日期值。方括號代表這項是可選的。比如在 [; secure]兩邊的方括號代表要想把cookie設(shè)置成安全的，就需要把"; secure" 加到cookie字符串值的后面。如果"; secure" 沒有加到cookie字符串后面，那么這個cookie就是不安全的。不要把尖括號<> 和方括號[] 加到cookie里（除非它們是某些值的內(nèi)容）。設(shè)置屬性時，不限屬性，可以用任何順序設(shè)置。

下面是一個例子，在這個例子里，cookie "username" 被設(shè)置成在15分鐘之后過期，可以被服務(wù)器上的所有目錄訪問，可以被"mydomain.com"域里的所有服務(wù)器訪問，安全狀態(tài)為安全。

// Date() 的構(gòu)造器設(shè)置以毫秒為單位
// .getTime() 方法返回時間，單位為毫秒
// 所以要設(shè)置15分鐘到期，要用60000毫秒乘15分鐘
var expiration = new Date((new Date()).getTime() + 15 * 60000);
document.cookie = "username=" + escape(form.username.value)+ "; expires ="
+ expiration.toGMTString() + "; path=" + "/" + "; _
domain=" + "mydomain.com" + "; secure";

讀取cookies值有點象個小把戲，因為你一次就得到了屬于當前文檔的所有cookies。

// 下面這個語句讀取了屬于當前文檔的所有cookies
var allcookies = document.cookie;

現(xiàn)在，我們得解析allcookies變量里的不同cookies，找到感興趣的指定cookie。這個工作很簡單，因為我們可以利用Javascript語言提供的擴展字符串支持。

如果我們對前面分配的cookie "username" 感興趣，可以用下面的腳本來讀取它的值。

// 我們定義一個函數(shù)，用來讀取特定的cookie值。
function getCookie(cookie_name)
{
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name);

// 如果找到了索引，就代表cookie存在，
// 反之，就說明不存在。
if (cookie_pos != -1)
{
// 把cookie_pos放在值的開始，只要給值加1即可。
cookie_pos += cookie_name.length + 1;
var cookie_end = allcookies.indexOf(";", cookie_pos);

if (cookie_end == -1)
{
cookie_end = allcookies.length;
}

var value = unescape(allcookies.substring(cookie_pos, cookie_end));
}

return value;
}

// 調(diào)用函數(shù)
var cookie_val = getCookie("username");

上面例程里的 cookie_val 變量可以用來生成動態(tài)內(nèi)容，或者發(fā)送給服務(wù)器端CGI腳本進行處理?，F(xiàn)在你知道了使用Javascript腳本操縱cookies的基本方法。但是，如果你跟我一樣，那么我們要做的第一件事，就是建立一些接口函數(shù)，把cookies處理上的麻煩隱藏起來。不過，在你開始編程之前，稍候片刻。這些工作，早就有人替你做好了。你要做的，只是到哪去找這些接口函數(shù)而已。

比如，在David Flangan的Javascript: The Definitive Guide 3rd Ed.這本書里，可以找到很好的cookie應(yīng)用類。你也可以在Oreilly的WEB站點上找到這本書里的例子。本文最后的鏈接列表里，有一些訪問這些cookie示例的直接鏈接。

Cookies 怪獸

因為某些原因Cookies 的名聲很不好。許多人利用cookies做一些卑鄙的事情，比如流量分析、點擊跟蹤。Cookies 也不是非常安全，特別是沒有secure屬性的cookies。不過，即使你用了安全的cookies，如果你和別人共用計算機，比如在網(wǎng)吧，那么別人就可以窺探計算機硬盤上未加密保存的cookie文件，也就有可能竊取你的敏感信息。所以，如果你是一個WEB開發(fā)人員，那么你要認真考慮這些問題。不要濫用cookies。不要把用戶可能認為是敏感的數(shù)據(jù)保存在cookies里。如果把用戶的社會保險號、信用卡號等保存在cookie里，等于把這些敏感信息放在窗戶紙下，無異于把用戶投到極大危險之中。一個好的原則是，如果你不想陌生人了解你的這些信息，那就不要把它們保存在cookies里。

另外，cookies還有一些實際的限制。Cookies保留在計算機上，不跟著用戶走。如果用戶想換計算機，那么新計算機無法得到原來的cookie。甚至用戶在同一臺計算機上使用不同瀏覽器，也得不到原來的cookie：Netscape 不能讀取Internet Explorer 的cookies。

還有，用戶也不愿意接受cookies。所以不要以為所有的瀏覽器都能接受你發(fā)出的cookies。如果瀏覽器不接受cookies，你要保證自己的WEB站點不致因此而崩潰或中斷。

另外WEB 瀏覽器能保留的cookies不一定能超過300個。也沒有標準規(guī)定瀏覽器什么時候、怎么樣作廢cookies。所以達到限制時，瀏覽器能夠有效地隨機刪除cookies。瀏覽器保留的來自一個WEB服務(wù)器上的cookies，不超過20個，每個cookie的數(shù)據(jù)（包括名稱和值），不超過4K字節(jié)。(不過，本文里的cookie尺寸沒問題，它只占了12 K字節(jié)，保存在3個3 cookies里。)

簡而言之，注意保持cookie簡單。不要依賴cookies的存在，不要在每個cookie里保存太多信息。不要保存太多的cookes。但是，拋除這些限制，在技巧高超的WEB管理員手里，cookie的概念是一個有用的工具。

外部鏈接
每個 Javascript 程序員都應(yīng)當有一份Javascript： David Flanagan 的The Definitive Guide。 這本書里找到cookie 類例程可以幫助你把不止一個變量編碼到單一的cookie，克服掉“每個WEB服務(wù)器20 個cookies的限制”。

下面是我測試時的代碼: