首先看一下基礎知識:
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值。還可以通過Regex的方式來匹配,如下: 複製代碼 代碼如下: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>