說明：
document.cookie 存入cookie資料
document.cookie=cookie資料名稱=資料;expires=有效期限
此範例設計說明：
第一步、checkCookie ，檢查是否有存入cookie了。
第二步、如果沒有cookie，顯示輸入名稱
第三步、setCookie(資料的名稱, 存放的值, 有效期限天數)如：setCookie("username", "levin", 1);
第四步、設定有效期限
第五步、存入document.cookie=cookie資料名稱=資料;expires=有效期限
第六步、顯示寫入 Cookie 成功頁面上
第七步、checkCookie ，檢查是否有存入cookie了。
第八步、有cookie，取出Cookie的資料，getCookie("username")
第九步、取出Cookie資料，依;切割資料
第十步、去掉空白
第十一步、比對你的名稱
第十二步、取出資料
第十三步、顯示資料
程式：
<html>
<head>
<title>37-[JavaScript-HTML_DOM]使用document物件，使用屬性document.cookie之三</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
//寫入Cookie
function setCookie(pname, pvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = pname + "=" + pvalue + "; " + expires;
document.getElementById("returnData").innerHTML = "寫入 Cookie 成功。";
}
//讀取Cookie
function getCookie(pname) {
var name = pname + "=";
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 "";
}
//檢查Cookie
function checkCookie() {
var user = getCookie("username");
if (user != "") {
var returnData = document.getElementById("returnData").innerHTML;
returnData = "歡迎使用者：" + user;
document.getElementById("returnData").innerHTML = returnData;
} else {
user = prompt("請輸入你的名稱:", "");
if (user != "" && user != null) {
setCookie("username", user, 1);
}
}
}
function mytest() {
checkCookie();
}
</script>
</head>
<body>
[JavaScript-HTML_DOM]使用document物件，使用屬性document.cookie之三
<br>
<input type="button" value="測試Cookie" onclick="mytest();" />
<span id="returnData"></span>
</body>
</html>
圖：
按下測試Cookie , 第一次會跳出，請輸入你的名稱框
相關範例：
- [JavaScript HTML DOM]使用document物件，使用屬性document.cookie之一
- [JavaScript HTML DOM]使用document物件，使用屬性document.cookie之二
參考：
JavaScript Cookies
其它文章
沒有留言:
張貼留言