JavaScript中Cookies的相關使用教程

2024-05-06 16:21:20

字體：大中小

來源：轉載

供稿：網友

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

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()函數。

讀取Cookies:

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

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

設置Cookies的過期日期：

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

例子：

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

<html>

<head>

<script type="text/javascript">



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



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