js cookie实现记住密码功能

一. js 实现记住密码功能

html:

<form action="checklogin.action" method="post" > <div> <label>用户名:</label> <input type="text" /> <span></span> </div> <div> <label>密&nbsp;码:</label> <input type="password" /> <span></span> </div> <div > <label>&nbsp;&nbsp;</label> <input type="checkbox" /> <span> 记住用户</span> </div> <input type="button" value=""/> </form>

cookie.js:

function setCookie (name, value) { var Days = 30; //此 cookie 将被保存 30 天 var exp = new Date(); exp.setTime(exp.getTime() + 1000); if(value==""||value=="null" ||value=="null"||value==" "){ }else{ document.cookie = name + "="+ escape(value) +";expires=Sun, 17-Jan-2038 19:14:07 GMT"; } } function getCookie(sName){ var aCookie = document.cookie.split("; "); for (var i=0; i < aCookie.length; i++) { var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) { return aCrumb[1]; } } return null; } function checkCookieExist(name){ if (getCookie(name)) return true; else return false; } function deleteCookie(name, path, domain){ var strCookie; // 检查Cookie是否存在 if (checkCookieExist(name)){ // 设置Cookie的期限为己过期 strCookie = name + "="; strCookie += (path) ? "; path=" + path : ""; strCookie += (domain) ? "; domain=" + domain : ""; strCookie += "; expires=Thu, 01-Jan-70 00:00:01 GMT"; document.cookie = strCookie; } } function saveCookie(name, value, expires, path, domain, secure){ var strCookie = name + "=" + value; if (expires){ // 计算Cookie的期限, 参数为天数 var curTime = new Date(); curTime.setTime(curTime.getTime() + expires*24*60*60*1000); strCookie += "; expires=" + curTime.toGMTString(); } // Cookie的路径 strCookie += (path) ? "; path=" + path : ""; // Cookie的Domain strCookie += (domain) ? "; domain=" + domain : ""; // 是否需要保密传送,为一个布尔值 strCookie += (secure) ? "; secure" : ""; document.cookie = strCookie; }

login.js

window.onload = function(){ //console.log("ctx: " + "${ctx}"); var name = getCookie("loginUserName"); document.getElementById("passWord").value=""; if(name != null && name != "") { document.getElementById("userName").value = name; document.getElementById("passWord").focus(); } else { document.getElementById("userName").focus(); } } function checkform(){ ...... var isChecked = document.getElementById("saveUserName").checked; if(isChecked) { setCookie("loginUserName",userName); } ...... }

二. jquery 实现记住密码功能

参考:

html:

<form>   <input type="text" autofocus required placeholder="用户名">   <input type="password" required placeholder="密码">   <br/>   <input type="checkbox" onkeydown="check_enter(event)">   <span for="remember_me" onkeydown="check_enter(event)">记住我</span>   <br/><br/>   <span>登 录</span> </form> <script src="https://www.jb51.net/jquery.js" type="text/javascript"></script>
  <script src="https://www.jb51.net/jquery.cookie.js" type="text/javascript"></script>

判断checkbox是否被选中,若选中,则将存储cookie:

if ($("#remember_me").attr("checked")) {     $.cookie("rmbUser", "true", { expires: 7 }); //存储一个带7天期限的cookie     $.cookie("username", account, { expires: 7 });     $.cookie("password", password, { expires: 7 }); } else {     $.cookie("rmbUser", "false", { expire: -1 });     $.cookie("username", "", { expires: -1 });     $.cookie("password", "", { expires: -1 }); }

在每次刷新登录页面加载js时,取出cookie中的用户名和密码,若cookie不为空,用户名和密码输入框被cookie里面的内容填充,复选框设为勾上状态:

$().ready(function(){     //获取cookie的值     var username = $.cookie('username');     var password = $.cookie('password');     //将获取的值填充入输入框中     $('#username').val(username);     $('#password').val(password);     if(username != null && username != '' && password != null && password != ''){ //选中保存秘密的复选框      $("#remember_me").attr('checked',true); }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwddss.html