Cookies是什麼 ?

Web瀏覽器和伺服器使用HTTP協定進行通訊，並且HTTP是一種無狀態協定。但對於一個商業網站它需要保持不同的頁面間的對談資訊。例如在完成多頁後，一個使用者註冊結束。但是，如何保持所有網頁使用者的對談資訊。

在許多情況下，使用Cookie來記憶和跟蹤的喜好，採購，佣金，並要求更好的存取體驗或網站的統計資料等資訊的最有效的方法。

它是如何工作的 ?

伺服器傳送一些資料到存取者的瀏覽器以cookie的形式。該瀏覽器可以接受cookie。如果是這樣，它是為存取者儲存在硬碟驅動器上的一個純文字的記錄。現在，當存取者到達您的網站其他頁面，瀏覽器傳送相同cookie到伺服器進行檢索。一旦檢索到，伺服器知道/記得剛才發生了什麼儲存。

Cookies有5個可變長度欄位的純文字資料記錄：

Expires : cookie將過期的日期。如果這是空白的，那麼就是當存取者退出瀏覽器cookie將到期。
Domain : 網站的域名。
Path : 路徑設定 cookie 目錄或網頁。如果想要從任何目錄或頁面，那麼cookie 是空的。
Secure : 如果該欄位包含“安全”二字，那麼cookie僅可檢索到一個安全的伺服器。如果該欄位為空，沒有限制存在。
Name=Value : Cookie設定在鍵和值對的形式來獲取。

的Cookie最初設計用於CGI程式設計和cookies的資料是在Web瀏覽器和Web伺服器之間自動傳輸的，所以在伺服器上的CGI指令碼可以讀取和寫入儲存在用戶端上的cookie的值。

JavaScript的也可以操作使用文件物件的cookie屬性。 JavaScript可以讀取，建立，修改和刪除適用於當前網頁的cookie或Cookies。

儲存Cookies:

建立一個cookie的最簡單的方法是一個字串值分配到document.cookie物件，它是這樣的：

語法

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

在這裡，expires屬性選項。如果提供這個屬性有一個有效的日期或時間，那麼cookie將在給定的日期或時間滿期，而後cookies的值將無法存取到。

注意：Cookie的值可能不包括分號，逗號或空白。出於這個原因，可能需要使用JavaScript 的 escape()函式將其儲存的值在cookie之前進行編碼。如果這樣做，當讀取cookie的值時也必須使用相應的unescape()函式。

例子：

下面是範例，設定在輸入客戶名稱在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>

這將產生以下結果。現在進入一些在文字框中，然後按下按鈕“Set Cookie”設定cookie。

現在，有一個cookie叫name。可以設定使用由逗號分隔multiplekey= value對應多個cookie。

你將在下一節學習如何讀取該cookie。

讀取Cookies:

讀取cookie和寫入一樣簡單，因為 document.cookieobject 的值是cookie。所以每當要存取cookie，可以使用這個字串。

該字串 document.cookie將繼續由分號，其中name是一個cookie的名稱，值是它的字串值分隔的名稱=值對的列表。

您可以使用字串split()函式來打破串入鍵和值如下：

例子：

下面是一個例子，以獲得上一節設定的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類的方法，該方法返回一個陣列的長度。我們將在一個單獨的章節討論陣列。到那個時候，請盡量消化它。

這將產生以下結果。現在按按鈕“Get Cookie”，看看在上一節中如何設定cookie。

注意：有可能在機器上已設定了一些其他的Cookie。所以，上面的程式碼會顯示所有設定cookie。

設定Cookies的過期日期：

可以通過設定的到期日期和儲存cookie中的失效日期延長超出當前瀏覽器對談cookie中的壽命。這可以通過設定expires屬性的日期和時間來完成。

例子：

下面的例子演示了如何設定cookie1個月後過期：

<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>

刪除Cookie：

有時如果想刪除一個cookie，以便後續嘗試讀取cookie返回什麼。要做到這一點，你只需要在到期日設定在過去的某個時間。

例子：

下面的例子演示了如何通過設定有效期限一個月以前刪除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>

註：不設定日期，可以使用setTime()函式看到新值。

JavaScript Cookies