首頁 > web前端 > js教程 > JavaScript中Cookies的相關使用教學_基礎知識

JavaScript中Cookies的相關使用教學_基礎知識

WBOY
發布: 2016-05-16 15:56:41
原創
1203 人瀏覽過

 Cookies是什麼 ?

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

在許多情況下,使用Cookie來記憶和追蹤的喜好,採購,佣金,並要求更好的訪問體驗或網站的統計數據等資訊的最有效的方法。
它是如何運作的 ?

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

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

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

的Cookie最初設計用於CGI程式設計和cookies的資料是在網路瀏覽器和網路伺服器之間自動傳輸的,所以在伺服器上的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">
<!--
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()函數看到新值。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板