Web 瀏覽器與服務(wù)器之間利用 HTTP 協(xié)議進(jìn)行通信，而且 HTTP 是一種無狀態(tài)的協(xié)議類型。但是對于商業(yè)網(wǎng)站，它通常需要維護(hù)一些與客戶端在不同網(wǎng)頁交互的信息。例如，一個(gè)用戶在很多網(wǎng)頁中填寫信息后完成了注冊，此時(shí)應(yīng)該如何維護(hù)(或者緩存)眾多網(wǎng)頁中用戶的信息。

在很多情況下，利用 Cookies 是最有效的方式，通過這種方式可以記錄和跟蹤一些用戶的偏好，購物車，工資，和其他的信息，而利用這些信息可以更好的了解用戶經(jīng)歷或者進(jìn)行網(wǎng)站統(tǒng)計(jì)。

它是如何的起作用的？

服務(wù)器以 Cookies 的形式發(fā)送一些數(shù)據(jù)給訪問者的瀏覽器。瀏覽器可以選擇接收這些 Cookies。如果它被接收了，它就會(huì)被以純文本的形式存儲(chǔ)在訪問者的硬盤中。接著，當(dāng)訪問者訪問網(wǎng)站中的另外一個(gè)網(wǎng)頁時(shí)，那些被緩存的 Cookies 會(huì)被發(fā)送到服務(wù)器進(jìn)行檢索。一旦服務(wù)器在服務(wù)端檢索到該 Cookies 信息，服務(wù)器就會(huì)知道訪問者本地已經(jīng)緩存了的數(shù)據(jù)。

Cookies 是純文本數(shù)據(jù)，記錄了 5 個(gè)可變長度的字段：

Expires： 這個(gè)字段記錄 Cookies 有效時(shí)間長度。如果這個(gè)字段為空，該 Cookies 將會(huì)在用戶關(guān)閉瀏覽器時(shí)過期，即該 Cookies 的數(shù)據(jù)不再可用。
Domain: 這個(gè)字段記錄網(wǎng)站名。
Path: 這個(gè)字段記錄設(shè)置 Cookies 的目錄或者網(wǎng)頁的路徑。如果你想在任何目錄或網(wǎng)頁里面等夠檢索到 Cookies 數(shù)據(jù)這個(gè)字段可以被設(shè)置為空。
Secure: 如果這個(gè)字段包含"secure"這個(gè)單詞，那么 Cookies 僅僅只能被安全服務(wù)器進(jìn)行檢索。如果這個(gè)字段為空，就沒有前面的限制。
Name=Value: Cookies 以鍵值對的形式進(jìn)行賦值和檢索。

Cookies 最初是為 CGI 編程提供的，并且 Cookies 數(shù)據(jù)在網(wǎng)頁瀏覽器和服務(wù)器之間是自動(dòng)的傳輸?shù)?，因此服?wù)器端的 CGI 腳本能夠讀寫存儲(chǔ)在客戶端的 Cookies。

JavaScript 通過使用 Document 對象的 Cookies 屬性同樣可以操作 Cookies。JavaScript 可以讀、創(chuàng)建、修改、和刪除 Cookie，或者那些應(yīng)用于當(dāng)前網(wǎng)頁的 Cookies。

Cookies 的存儲(chǔ)

創(chuàng)建 Cookie 最簡單的方式就是給 document.cookie 對象賦值一個(gè)字符串值，它的語法如下：

語法

document.cookie = "key1=value;key2=value2;expires=date";

這里的 expires 屬性字段是可選的。如果你給它提供一個(gè)有效的日期或者時(shí)間值，Cookie 將會(huì)在你給定的日期或時(shí)間達(dá)到時(shí)過期，并且這之后 Cookie 的屬性值都會(huì)變的不可訪問。

注意: Cookie 的值不包括分號(hào)，逗號(hào)或者空格。因此，在存儲(chǔ) Cookie 之前，你可能需要利用 JavaScript 提供的 escape() 函數(shù)來對其值進(jìn)行轉(zhuǎn)義。如果你按照那樣做的話，當(dāng)你讀取 Cookie 的值時(shí)，你就需要利用相應(yīng)的 unescape() 函數(shù)。

例子

下面是一個(gè)將用戶的名稱記錄在 Cookie 的例子。

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   if( document.myform.customer.value == "" ){
      alert("Enter some value!");
      return;
   }

   cookievalue= escape(document.myform.customer.value) + ";";
   document.cookie="name=" + cookievalue;
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>

上面代碼執(zhí)行效果如下。當(dāng)在文本框中輸入文字并且點(diǎn)擊了 "Set Cookie" 按鈕就可以設(shè)置 Cookie。

現(xiàn)在你的機(jī)器中存在一個(gè)名稱為 name 的 Cookie。你可以利用多個(gè) key = value 鍵值對，他們之間用逗號(hào)分開，這樣來設(shè)置多個(gè) Cookie 信息。

讀取 Cookies

讀取 Cookie 就像寫它一樣簡單，因?yàn)?document.cookie 對象的值就是 Cookie 的屬性值。因此你可以利用這個(gè)字符串在任何時(shí)候?qū)?Cookie 進(jìn)行訪問。

document.cookie 字符串會(huì)保存一系列用分號(hào)分開的 name = value 鍵值對，這里的 name 就是一個(gè) Cookie 名稱，value 是它的值。

你可以利用 split() 函數(shù)將字符串分解成如下形式的 key 和 value：

例子

下面的是讀取前面一節(jié)設(shè)置的 Cookie 信息。

<html>
<head>
<script type="text/javascript">
<!--
function ReadCookie()
{
   var allcookies = document.cookie;
   alert("All Cookies : " + allcookies );

   // Get all the cookies pairs in an array
   cookiearray  = allcookies.split(';');

   // Now take key value pair out of this array
   for(var i=0; i<cookiearray.length; i++){
      name = cookiearray[i].split('=')[0];
      value = cookiearray[i].split('=')[1];
      alert("Key is : " + name + " and Value is : " + value);
   }
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>

注意：
這里的 length 是 Array 類型的一個(gè)方法，該方法返回一個(gè)數(shù)組的長度。我們會(huì)在一個(gè)單獨(dú)的章節(jié)再討論數(shù)組類型。在那個(gè)時(shí)候請?jiān)俸煤美斫膺@個(gè)方法。

上面的代碼會(huì)有如下的效果。當(dāng)你按下 "Get Cookie" 按鈕，你就會(huì)看到你在上一節(jié)設(shè)置的 Cookie 信息。

注意：
在你的機(jī)器上可能已經(jīng)存在一些其他的 Cookie。因此上面的代碼會(huì)顯示存儲(chǔ)在你的機(jī)器上所有的 Cookies 信息。

設(shè)置 Cookies 有效日期

你可以設(shè)置有效日期并且將該有效日期與 Cookie 進(jìn)行綁定，從而可以延長 Cookie 的生存時(shí)間超過當(dāng)前瀏覽器的會(huì)話。這個(gè)可以為 expires 屬性賦值一個(gè)日期或者時(shí)間來實(shí)現(xiàn)。

例子

下面的代碼說明怎樣設(shè)置讓 Cookie 在一個(gè)月之后失效：

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() + 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

刪除一個(gè) Cookie

有時(shí)你想要?jiǎng)h除一個(gè) Cookie，從而下次嘗試讀取 Cookie 信息時(shí)會(huì)返回一個(gè)空值。為了實(shí)現(xiàn)這個(gè)，你可以設(shè)置 Cookie 的有效生存時(shí)間為過去的某個(gè)時(shí)間的即可。

例子

下面的代碼說明如何將一個(gè) Cookie 的有效時(shí)間設(shè)置為過去的一個(gè)月來刪除 Cookie。

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() - 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

注意：
除了設(shè)置日期你還可以利用 setTime() 方法來實(shí)現(xiàn)設(shè)置有效時(shí)間。

上一篇：調(diào)試下一篇：文檔對象模型

Cookies

Cookies 是什么？

它是如何的起作用的？

Cookies 的存儲(chǔ)

語法

例子

讀取 Cookies

例子

設(shè)置 Cookies 有效日期

例子

刪除一個(gè) Cookie

例子

Cookies 是什么？

它是如何的起作用的？