JavaScript Cookie
什么是 Cookies？
Cookies 是一些數(shù)據(jù), 存儲(chǔ)于你電腦上的文本文件中。
當(dāng) web 服務(wù)器向?yàn)g覽器發(fā)送 web 頁(yè)面時(shí)，在連接關(guān)閉后，服務(wù)端不會(huì)記錄用戶的信息。
Cookies 的作用就是用于解決 "如何記錄客戶端的用戶信息":
當(dāng)用戶訪問(wèn) web 頁(yè)面時(shí)，他的名字可以記錄在 cookie 中。
在用戶下一次訪問(wèn)該頁(yè)面時(shí)，可以在 cookie 中讀取用戶訪問(wèn)記錄。
Cookies 以名/值對(duì)形式存儲(chǔ)，如下所示:
username=John Doe
當(dāng)瀏覽器從服務(wù)器上請(qǐng)求 web 頁(yè)面時(shí)， 屬于該頁(yè)面的 cookies 會(huì)被添加到該請(qǐng)求中。服務(wù)端通過(guò)這種方式來(lái)獲取用戶的信息。
document cookie 屬性定義
cookie 屬性可設(shè)置或查詢與當(dāng)前文檔相關(guān)的所有 cookie。語(yǔ)法如下：
document.cookie [ = name1=value1; expire=GMT_String; path=; domain=;]
設(shè)置 cookie 值
現(xiàn)在要設(shè)置兩個(gè) cookie：
user_id=2;
user_name=admin;
JavaScript 代碼如下：
document.cookie = "user_id=2";
document.cookie = "user_name=admin";
設(shè)置 cookie 過(guò)期時(shí)間，路徑及作用域
下面的例子設(shè)置過(guò)期時(shí)間為一天，路徑為網(wǎng)站根目錄，所有此域名下的 cookie 都共享：
//獲取當(dāng)前時(shí)間
var date=new Date();
date.setTime(date.getTime()+24*3600*1000);
document.cookie = "user_id=2;path=/;domain=.5idev.com;expire="+date.toGMTString();
設(shè)置 cookie 有特殊符號(hào)
在 cookie 的名或值中不能使用分號(hào)（;）、逗號(hào)（,）、等號(hào)（=）以及空格，當(dāng)值中需要保留這些符號(hào)時(shí)，需要用 escape() 函數(shù)進(jìn)行編碼，它能將一些特殊符號(hào)使用十六進(jìn)制表示。
document.cookie = "test="+escape("JavaScript cookie test");
而在取出值以后再使用 unescape() 進(jìn)行解碼從而得到原來(lái)的 cookie 值，這種方法還能有效避免中文亂碼等。
獲取 cookie 值
通過(guò) document.cookie 可以直接獲取當(dāng)前頁(yè)面 cookie 的值，得到的是一個(gè)字符串。下面的例子讀取當(dāng)前頁(yè)面的 cookie（如果有的話）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p>與本文檔相關(guān)的 cookies（如果存在的話）：</p> <script type="text/javascript"> document.write(document.cookie) </script> </body> </html>
檢測(cè) cookie 值的函數(shù)
最后，我們可以創(chuàng)建一個(gè)檢測(cè) cookie 是否創(chuàng)建的函數(shù)。
如果設(shè)置了 cookie，將顯示一個(gè)問(wèn)候信息。
如果沒(méi)有設(shè)置 cookie，將會(huì)顯示一個(gè)彈窗用于詢問(wèn)訪問(wèn)者的名字，并調(diào)用 setCookie 函數(shù)將訪問(wèn)者的名字存儲(chǔ) 365 天：
function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}使用 JavaScript 創(chuàng)建Cookie
JavaScript 可以使用?document.cookie?屬性來(lái)創(chuàng)建 、讀取、及刪除 cookies。
JavaScript 中，創(chuàng)建 cookie 如下所示：
document.cookie="username=John Doe";
您還可以為 cookie 添加一個(gè)過(guò)期時(shí)間（以 UTC 或 GMT 時(shí)間）。默認(rèn)情況下，cookie 在瀏覽器關(guān)閉時(shí)刪除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑。默認(rèn)情況下，cookie 屬于當(dāng)前頁(yè)面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript 讀取 Cookie
在 JavaScript 中, 可以使用以下代碼來(lái)讀取 cookies：
var x = document.cookie;
提示：document.cookie 將以字符串的方式返回所有的 cookies，類型格式： cookie1=value; cookie2=value; cookie3=value; ? ?
使用 JavaScript 修改 Cookie
在 JavaScript 中，修改 cookies 類似于創(chuàng)建 cookies，如下所示：
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
舊的 cookie 將被覆蓋。
使用 JavaScript 刪除 Cookie
刪除 cookie 非常簡(jiǎn)單。您只需要設(shè)置 expires 參數(shù)為以前的時(shí)間即可，如下所示，設(shè)置為 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意，當(dāng)您刪除時(shí)不必指定 cookie 的值。
完整實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("Welcome again " + user);
}
else {
user = prompt("Please enter your name:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>
