首先看一下基礎知識：
1、什麼是cookie
cookie 是存儲於訪問者的計算機中的變量。每當同一台計算機通過浏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值
2、有關cookie的例子：
•名字 cookie 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會存儲於 cookie 中。當訪問者再次訪問網站時，他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
•密碼 cookie 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被存儲於 cookie 中。當他們再次訪問網站時，密碼就會從 cookie 中取回。
•日期 cookie 當訪問者首次訪問你的網站時，當前的日期可存儲於 cookie 中。當他們再次訪問網站時，他們會收到類似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。
下面來創建一個cookie的實例，如何來創建cookie及取出cookie
javascript部分代碼：
復制代碼 代碼如下:
//創建cookie
function setCookie(name, value, expireday) {
var exp = new Date();
exp.setTime(exp.getTime() + expireday*24*60*60*1000); //設置cookie的期限
document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//創建cookie
}
//提取cookie中的值
function getCookie(name) {
var cookieStr = document.cookie;
if(cookieStr.length > 0) {
var cookieArr = cookieStr.split(";"); //將cookie信息轉換成數組
for (var i=0; i<cookieArr.length; i++) {
var cookieVal = cookieArr[i].split("="); //將每一組cookie(cookie名和值)也轉換成數組
if(cookieVal[0] == name) {
return unescape(cookieVal[1]); //返回需要提取的cookie值
}
}
}
}
//測試cookie
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "您好"+userName+"，歡迎再次回來！";
} else {
var value = prompt("請輸入用戶名", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("請輸入用戶名！");
}
}
}
主要在於如何提取我們需要的cookie信息，在本例的getCookie函數中主要是將cookie信息轉化成數組的方式來查找我們需要提取的cookie值。還可以通過正則表達式的方式來匹配，如下：
復制代碼 代碼如下:
function getCookie(name) {
var cookieStr = document.cookie;
var cookieArr = cookieStr.match(new RegExp(name+"=[a-zA-Z0-9]*;$"));
var cookieVal = cookieArr.split("=");
if(cookieVal[0] == name) {
return unescape(cookieVal[1]);
}
}
比如在這個例子中，如果打開浏覽器中沒有存儲名為userName的cookie，則會提示用戶輸入用戶名，再次刷新頁面時則會顯示輸入的cookie值。
最後我們可以測試一下代碼：
復制代碼 代碼如下:
<body onload="checkCookie()">
<p id="cookieUser"></p>
</body>