快捷導(dǎo)航

JavaScript中Cookies的相關(guān)使用教程

更新時(shí)間：2015年06月04日 10:56:26 投稿：goldensun

這篇文章主要介紹了JavaScript中Cookies的相關(guān)使用教程,包括Cookies的存儲(chǔ)和刪除等操作方法,需要的朋友可以參考下

Cookies是什么 ?

Web瀏覽器和服務(wù)器使用HTTP協(xié)議進(jìn)行通信，并且HTTP是一種無(wú)狀態(tài)協(xié)議。但對(duì)于一個(gè)商業(yè)網(wǎng)站它需要保持不同的頁(yè)面間的會(huì)話信息。例如在完成多頁(yè)后，一個(gè)用戶注冊(cè)結(jié)束。但是，如何保持所有網(wǎng)頁(yè)用戶的會(huì)話信息。

在許多情況下，使用Cookie來(lái)記憶和跟蹤的喜好，采購(gòu)，傭金，并要求更好的訪問(wèn)體驗(yàn)或網(wǎng)站的統(tǒng)計(jì)數(shù)據(jù)等信息的最有效的方法。
它是如何工作的 ?

服務(wù)器發(fā)送一些數(shù)據(jù)到訪問(wèn)者的瀏覽器以cookie的形式。該瀏覽器可以接受cookie。如果是這樣，它是為訪問(wèn)者存儲(chǔ)在硬盤驅(qū)動(dòng)器上的一個(gè)純文本的記錄。現(xiàn)在，當(dāng)訪問(wèn)者到達(dá)您的網(wǎng)站其他頁(yè)面，瀏覽器發(fā)送相同cookie到服務(wù)器進(jìn)行檢索。一旦檢索到，服務(wù)器知道/記得剛才發(fā)生了什么存儲(chǔ)。

Cookies有5個(gè)可變長(zhǎng)度字段的純文本數(shù)據(jù)記錄：

Expires : cookie將過(guò)期的日期。如果這是空白的，那么就是當(dāng)訪問(wèn)者退出瀏覽器cookie將到期。
Domain : 網(wǎng)站的域名。
Path : 路徑設(shè)置 cookie 目錄或網(wǎng)頁(yè)。如果想要從任何目錄或頁(yè)面，那么cookie 是空的。
Secure : 如果該字段包含“安全”二字，那么cookie僅可檢索到一個(gè)安全的服務(wù)器。如果該字段為空，沒(méi)有限制存在。
Name=Value : Cookie設(shè)置在鍵和值對(duì)的形式來(lái)獲取。

的Cookie最初設(shè)計(jì)用于CGI編程和cookies的數(shù)據(jù)是在Web瀏覽器和Web服務(wù)器之間自動(dòng)傳輸?shù)模栽诜?wù)器上的CGI腳本可以讀取和寫入存儲(chǔ)在客戶端上的cookie的值。

JavaScript的也可以操作使用文檔對(duì)象的cookie屬性。 JavaScript可以讀取，創(chuàng)建，修改和刪除適用于當(dāng)前網(wǎng)頁(yè)的cookie或Cookies。
儲(chǔ)存Cookies:

創(chuàng)建一個(gè)cookie的最簡(jiǎn)單的方法是一個(gè)字符串值分配到document.cookie對(duì)象，它是這樣的：
語(yǔ)法

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

在這里，expires屬性選項(xiàng)。如果提供這個(gè)屬性有一個(gè)有效的日期或時(shí)間，那么cookie將在給定的日期或時(shí)間滿期，而后cookies的值將無(wú)法訪問(wèn)到。

注意：Cookie的值可能不包括分號(hào)，逗號(hào)或空白。出于這個(gè)原因，可能需要使用JavaScript 的 escape()函數(shù)將其存儲(chǔ)的值在cookie之前進(jìn)行編碼。如果這樣做，當(dāng)讀取cookie的值時(shí)也必須使用相應(yīng)的unescape()函數(shù)。
讀取Cookies:

讀取cookie和寫入一樣簡(jiǎn)單，因?yàn)?document.cookieobject 的值是cookie。所以每當(dāng)要訪問(wèn)cookie，可以使用這個(gè)字符串。

該字符串 document.cookie將繼續(xù)由分號(hào)，其中name是一個(gè)cookie的名稱，值是它的字符串值分隔的名稱=值對(duì)的列表。
設(shè)置Cookies的過(guò)期日期：

可以通過(guò)設(shè)置的到期日期和保存cookie中的失效日期延長(zhǎng)超出當(dāng)前瀏覽器會(huì)話cookie中的壽命。這可以通過(guò)設(shè)置expires屬性的日期和時(shí)間來(lái)完成。
例子：

下面的例子演示了如何設(shè)置cookie1個(gè)月后過(guò)期：

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

有時(shí)如果想刪除一個(gè)cookie，以便后續(xù)嘗試讀取cookie返回什么。要做到這一點(diǎn)，你只需要在到期日設(shè)置在過(guò)去的某個(gè)時(shí)間。
例子：

下面的例子演示了如何通過(guò)設(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ù)看到新值。

您可能感興趣的文章: