首頁 > 開發者 > JavaScript
首先看一下基礎知識：
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
