1. Cookie是什么
Web瀏覽器和服務(wù)器通過HTTP協(xié)議進(jìn)行數(shù)據(jù)交流和通信,并且HTTP協(xié)議是無狀態(tài)(stateless)的協(xié)議,所謂HTTP無狀態(tài),總結(jié)大概就是如下4點(diǎn),
- HTTP協(xié)議對(duì)于事務(wù)處理沒有記憶能力。
- 對(duì)同一個(gè)url請(qǐng)求沒有上下文關(guān)系。
- 每次的請(qǐng)求都是獨(dú)立的,它的執(zhí)行情況和結(jié)果與前面的請(qǐng)求和之后的請(qǐng)求是無直接關(guān)系的,它不會(huì)受前面的請(qǐng)求應(yīng)答情況直接影響,也不會(huì)直接影。
- 服務(wù)器中沒有保存客戶端的狀態(tài),客戶端必須每次帶上自己的狀態(tài)去請(qǐng)求服務(wù)器。
很多商業(yè)新的網(wǎng)站都需要在不同頁(yè)面之間共享會(huì)話信息,例如在一個(gè)用戶完成注冊(cè)之后,在諸如下單和個(gè)人中心頁(yè)面,都需要用戶的登錄信息,而無狀態(tài)的HTTP協(xié)議無法達(dá)到這樣的要求。那么通過什么樣的技術(shù)才能在不同頁(yè)面之間共享用戶的會(huì)話信息呢?這就是cookie的用武之地了。
簡(jiǎn)單來說,cookie就是為了保存瀏覽器和服務(wù)器之間的會(huì)話狀態(tài),用以提升用戶體驗(yàn)的一個(gè)存儲(chǔ)介質(zhì)。說起來cookie真是一個(gè)很甜很萌的命名呢,也許正是因?yàn)閏ookie優(yōu)化了用戶體驗(yàn),像個(gè)小甜點(diǎn)一樣讓人開心吧。
2. Cookie工作原理
在瀏覽器和服務(wù)器通信時(shí),服務(wù)器以cookie的格式向用戶的瀏覽器發(fā)送一些數(shù)據(jù),如果瀏覽器可以接收cookie,它會(huì)將cookie以純文本(plain text record)的形式存儲(chǔ)在用戶的磁盤上?,F(xiàn)在,當(dāng)用戶訪問網(wǎng)站的另一個(gè)頁(yè)面的時(shí)候,瀏覽器會(huì)將相同的cookie發(fā)送給服務(wù)器用來取回相關(guān)信息。一旦服務(wù)器獲取到客戶端發(fā)送的cookie信息,服務(wù)器就會(huì)知道之前與該瀏覽器通信時(shí)存儲(chǔ)的什么內(nèi)容。
Cookie并不是什么復(fù)雜的概念,它是一串記錄了如下5個(gè)可變長(zhǎng)度字段的純文本,
- Expires ? 失效期,表示cookie失效的日期。如果expires是空白,那么在用戶關(guān)閉瀏覽器的時(shí)候,該cookie就會(huì)失效。
- Domain ? 域名
- Path ? 路徑,存儲(chǔ)cookie的文件路徑或一個(gè)web頁(yè)面。一般來說推薦設(shè)置path為空,這樣你可以從任何路徑或頁(yè)面獲取到cookie。
- Secure ? 安全,如果包含了secure,那么只能從安全的服務(wù)器獲取cookie;如果secure字段為空,則沒有上述限制。
- Name=Value,cookie都是以鍵值對(duì)的形式進(jìn)行存儲(chǔ)和讀取的。
最初,cookie是為CGI編程而設(shè)計(jì)。cookie中包含的數(shù)據(jù)可以自動(dòng)地在web瀏覽器和web服務(wù)器之間傳播,所以服務(wù)器上的CGI腳本(scripts)可以對(duì)客戶端存儲(chǔ)的cookie進(jìn)行讀寫操作。
在javascript中,可以通過Document
對(duì)象的cookie屬性來熟練地操作瀏覽器的cookie。javascript可以讀取、創(chuàng)建、修改和刪除應(yīng)用于當(dāng)前頁(yè)面的cookie內(nèi)容。
3. Cookie操作
與數(shù)據(jù)庫(kù)類似,cookie也有相關(guān)的增刪改查的操作,總結(jié)起來包括cookie的存儲(chǔ)、讀取、設(shè)置有效期以及刪除等,下面通過代碼逐個(gè)講解。
3.1 存儲(chǔ)cookie
創(chuàng)建cookie最簡(jiǎn)單的方式就是為document.cookie對(duì)象賦值一段字符串,如下代碼所示,
document.cookie = "key1=value1;key2=value2;expires=date";
在這里,expires
屬性是可選的,如果你為expires屬性設(shè)置一個(gè)有效的日期或時(shí)間,那么該cookie將在給定的日期或時(shí)間之后失效,此后cookie的值就不能訪問了。
注意:cookie的值(value)不能包含
逗號(hào),
,分號(hào);
和空白符
。因此,在存儲(chǔ)一個(gè)值到cookie之前,應(yīng)該先用javascript內(nèi)置的escape()
函數(shù)對(duì)值的內(nèi)容進(jìn)行編碼;反過來,讀取cookie值的時(shí)候,應(yīng)該先用unescape()
函數(shù)對(duì)cookie值進(jìn)行解碼。
存儲(chǔ)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
document.write("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>
3.2 讀取cookie
讀取cookie就像存儲(chǔ)cookie一樣簡(jiǎn)單,因?yàn)閐ocument.cookie對(duì)象的值就是cookie。因此任何時(shí)候當(dāng)你想要獲取cookie的時(shí)候就可以使用document.cookie這個(gè)字符串。在document.cookie這個(gè)字符串中,它包含了一系列name=value
這樣通過分號(hào);
分隔的鍵值對(duì)。可以使用字符串string的split()
方法將cookie字符串分割,獲取cookie的每一個(gè)name以及對(duì)應(yīng)的value。
獲取所有的cookie,如下代碼所示,
<html>
<head>
<script type="text/javascript">
function readCookie() {
var allCookies = document.cookie
document.write("All cookies : " + allCookies)
// get all the cookies pairs in an array
cookieArray = allCookies.split(';')
for (var i = 0; i < cookieArray.length; i++) {
name = cookieArray[i].split('=')[0]
value = cookieArray[i].split('=')[1]
document.write("Key is : " + name + " and Value is : " + value)
}
}
</script>
</head>
<body>
<form name="myform" action="">
<p>click the following button and see the result:</p>
<input type="button" value="Get Cookie" onclick="readCookie()"/>
</form>
</body>
</html>
3.3 設(shè)置cookie有效期
為了延長(zhǎng)當(dāng)前瀏覽器會(huì)話中的cookie的生命周期,可以通過expires
屬性為cookie設(shè)置一個(gè)失效期,如下代碼所示,設(shè)置cookie的有效期為1個(gè)月,
<html>
<head>
<script>
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() + ";"
document.write("Setting Cookies : " + "name=" + cookieValue)
}
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <inpu type="text" name="customer">
<input type="button" value="Set Cookie" onclick="writeCookie()">
</form>
</body>
</html>
3.4 刪除cookie
如果將cookie刪除,那么后面的請(qǐng)求試圖訪問cookie將會(huì)得到空的字符串。為了刪除cookie,將cookie的失效期設(shè)置為一個(gè)過去的時(shí)間,如下代碼所示,設(shè)置了cookie的失效期為1個(gè)月之前,
<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() + ";"
document.write("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="wirteCookie()"/>
</form>
</body>
</html>
4. 小結(jié)
以上就是javascript中關(guān)于cookie的基本概念介紹和簡(jiǎn)單demo示范,讀者可以查閱更多資料了解更多關(guān)于cookie的知識(shí),如果有錯(cuò)誤或者不當(dāng)之處,還請(qǐng)讀者朋友指正。