JavaScript中Cookies的相關使用教程
Cookies是什么 ?
Web瀏覽器和服務器使用HTTP協議進行通信,并且HTTP是一種無狀態(tài)協議。但對于一個商業(yè)網站它需要保持不同的頁面間的會話信息。例如在完成多頁后,一個用戶注冊結束。但是,如何保持所有網頁用戶的會話信息。
在許多情況下,使用Cookie來記憶和跟蹤的喜好,采購,傭金,并要求更好的訪問體驗或網站的統(tǒng)計數據等信息的最有效的方法。
它是如何工作的 ?
服務器發(fā)送一些數據到訪問者的瀏覽器以cookie的形式。該瀏覽器可以接受cookie。如果是這樣,它是為訪問者存儲在硬盤驅動器上的一個純文本的記錄?,F在,當訪問者到達您的網站其他頁面,瀏覽器發(fā)送相同cookie到服務器進行檢索。一旦檢索到,服務器知道/記得剛才發(fā)生了什么存儲。
Cookies有5個可變長度字段的純文本數據記錄:
- Expires : cookie將過期的日期。如果這是空白的,那么就是當訪問者退出瀏覽器cookie將到期。
- Domain : 網站的域名。
- Path : 路徑設置 cookie 目錄或網頁。如果想要從任何目錄或頁面,那么cookie 是空的。
- Secure : 如果該字段包含“安全”二字,那么cookie僅可檢索到一個安全的服務器。如果該字段為空,沒有限制存在。
- Name=Value : Cookie設置在鍵和值對的形式來獲取。
的Cookie最初設計用于CGI編程和cookies的數據是在Web瀏覽器和Web服務器之間自動傳輸的,所以在服務器上的CGI腳本可以讀取和寫入存儲在客戶端上的cookie的值。
JavaScript的也可以操作使用文檔對象的cookie屬性。 JavaScript可以讀取,創(chuàng)建,修改和刪除適用于當前網頁的cookie或Cookies。
儲存Cookies:
創(chuàng)建一個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將繼續(xù)由分號,其中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,以便后續(xù)嘗試讀取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中的prototype.bind()方法介紹
在JavaScript中,我們經常用到函數綁定,而當你需要在另一個函數中保持this上下文時,使用Function.prototype.bind()會很方便2014-04-04JavaScript parseInt()與Number()區(qū)別案例詳解
這篇文章主要介紹了JavaScript parseInt()與Number()區(qū)別案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09JavaScript中的Repaint和Reflow用法詳解
這篇文章主要介紹了JavaScript中的Repaint和Reflow用法詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-07-07