記住賬號密碼 （密碼賬號輸入框在設定的時間內有效）
阿新 • • 發佈：2019-01-01
前幾天在做記住賬號密碼這個功能，查了資料有了解到：cookie 與 session 兩種傳送 ，cookie是在客戶端保持登入狀態的機制；session是在服務端保持狀態的傳送。相同點就是可以保持視窗的登入狀態，不同點就是cookie容易被劫持，不安全，session相對而言更安全。瞭解到的就這麼多，現在就cookie來直接上程式碼吧。
html程式碼有：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>login</title> <script type="text/javascript" src="cookie.js"></script> <script type="text/javascript" src="common.js"></script> </head> <body> <form action=""> <p> <span>使用者名稱:</span> <input id="userName" type="text" value=""/></p> <p> <span>密碼:</span> <input id="password" type="password" value=""/></p> <p> <span style="font-size:12px; color:blue;">記住密碼</span> <input id="saveCookie" type="checkbox" value="" /></p> <p> <input id="submit" type="button" value="登入" /> </p> </form> </body> </html>
JS程式碼有： common.js
function $(objStr){return document.getElementById(objStr);} window.onload = function(){ //分析cookie值，顯示上次的登陸資訊 var userNameValue = getCookieValue("userName"); $("userName").value = userNameValue; var passwordValue = getCookieValue("password"); $("password").value = passwordValue; //寫入點選事件 $("submit").onclick = function() { var userNameValue = $("userName").value; var passwordValue = $("password").value; //伺服器驗證（模擬） var isAdmin = userNameValue == "admin" && passwordValue =="123456"; var isUserA = userNameValue == "userA" && passwordValue =="userA"; var isMatched = isAdmin || isUserA; if(isMatched){ if( $("saveCookie").checked){ setCookie("userName",$("userName").value,24,"/"); setCookie("password",$("password").value,24,"/"); } alert("登陸成功,歡迎你," + userNameValue + "!"); self.location.replace("welcome.html"); } else alert("使用者名稱或密碼錯誤，請重新輸入！"); } }
cookie.js程式碼：
//新建cookie。 //hours為空字串時,cookie的生存期至瀏覽器會話結束。hours為數字0時,建立的是一個失效的cookie,這個cookie會覆蓋已經建立過的同名、同path的cookie（如果這個cookie存在）。 function setCookie(name,value,hours,path){ var name = escape(name); var value = escape(value); var expires = new Date(); expires.setTime(expires.getTime() + hours*3600000); path = path == "" ? "" : ";path=" + path; _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString(); document.cookie = name + "=" + value + _expires + path; } //獲取cookie值 function getCookieValue(name){ var name = escape(name); //讀cookie屬性，這將返回文件的所有cookie var allcookies = document.cookie; //查詢名為name的cookie的開始位置 name += "="; var pos = allcookies.indexOf(name); //如果找到了具有該名字的cookie，那麼提取並使用它的值 if (pos != -1){ //如果pos值為-1則說明搜尋"version="失敗 var start = pos + name.length; //cookie值開始的位置 var end = allcookies.indexOf(";",start); //從cookie值開始的位置起搜尋第一個";"的位置,即cookie值結尾的位置 if (end == -1) end = allcookies.length; //如果end值為-1說明cookie列表裡只有一個cookie var value = allcookies.substring(start,end); //提取cookie的值 return (value); //對它解碼 } else return ""; //搜尋失敗，返回空字串 } //刪除cookie function deleteCookie(name,path){ var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path; }