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)讀者朋友指正。
