javascript學習筆記(七)利用javascript來建立和儲存cookie

來源:互聯網
上載者:User

首先看一下基礎知識:
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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.