[JavaScript HTML DOM]使用document物件，使用屬性document.cookie之三 說明： 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 , 第一次會跳出，請輸入你的名稱框
輸入名稱，後確認
寫入Cookie成功
再按下測試Cookie，第二次了，會顯示你剛輸入的名稱
相關範例：
- [JavaScript HTML DOM]使用document物件，使用屬性document.cookie之一
- [JavaScript HTML DOM]使用document物件，使用屬性document.cookie之二
ZK (1)
