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()函數看到新值。
