html登入 ——記住密碼 cookie
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登入頁面</title> <link rel="stylesheet" href="layui/css/layui.css"> <script src="js/jquery.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/jquery.base64.js"></script> <style type="text/css"> html,body{ height:100%; width:100%; background-color: #53E3A6; } .div1{ height: 300px; width: 400px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; background: #F0F0F0; text-align: center; padding-top: 10px; } </style> </head> <body onload="getCookie();"> <div class="div1"> <h2>後臺管理系統</h2> <div> <div style="margin: 10px;"> <input id="zhanghao" type="text" name="zhanghao" required lay-verify="required" placeholder="請輸入賬號" autocomplete="off" class="layui-input" value="admin"> </div> <div style="margin: 10px;"> <input id="mima" type="password" name="password" required lay-verify="required" placeholder="請輸入密碼" autocomplete="off" class="layui-input" value="123456"> </div> <div style="margin: 10px;"> <input style="position: absolute;left: 10px;width: 20px;height: 20px;" type="checkbox" name="jizhu" title="發呆" lay-skin="primary"> <span style="position: absolute;left: 40px;">記錄密碼</span> </div> <div style="margin-top: 50px;"> <button id="denglu" class="layui-btn" style="width: 200px;">登入</button> </div> </div> </div> <script> //var loginurl="http://localhost:8088/register"; $(function(){
getCookie() }) var loginurl="http://localhost:8088/login"; $("#denglu").click(function(){ login(); }); //設定cookie function setCookie(){ var loginCode = $("#zhanghao").val(); //獲取使用者名稱資訊 var pwd = $("#mima").val(); //獲取登陸密碼資訊 var checked = $("input[type='checkbox']").is(':checked');//獲取“是否記住密碼”複選框 //console.log("setCookie方法是否記住密碼："+checked); if(checked){ //判斷是否選中了“記住密碼”複選框 //設定cookie過期時間 var date = new Date(); date.setTime(date.getTime()+60*1000);//只能這麼寫，60表示60秒鐘 60*1000是一分鐘 //console.log("cookie過期時間："+date); $.cookie("login_code",loginCode,{ expires: date, path: '/' });//呼叫jquery.cookie.js中的方法設定cookie中的使用者名稱 $.cookie("pwd",$.base64.encode(pwd),{ expires: date, path: '/' });//呼叫jquery.cookie.js中的方法設定cookie中的登陸密碼，並使用base64（jquery.base64.js）進行加密 }else{ $.cookie("login_code", null); $.cookie("pwd", null); } } //清除所有cookie函式 function clearAllCookie() { var date=new Date(); date.setTime(date.getTime()-10000); var keys=document.cookie.match(/[^ =;]+(?=\=)/g); console.log("需要刪除的cookie名字："+keys); if (keys) { for (var i = keys.length; i--;) document.cookie=keys[i]+"=0; expire="+date.toGMTString()+"; path=/"; } } //獲取cookie function getCookie(){ var loginCode = $.cookie("login_code"); //獲取cookie中的使用者名稱 var pwd = $.cookie("pwd"); //獲取cookie中的登陸密碼 console.log("獲取cookie:賬戶："+loginCode); console.log("獲取cookie:密碼："+pwd); if (!loginCode||loginCode==0) { console.log("賬戶："+!loginCode); //alert("請輸出內容！"); }else{ $("#zhanghao").val(loginCode); } if(!pwd||pwd==0){ console.log("密碼："+!pwd); }else{ //密碼存在的話把密碼填充到密碼文字框 //console.log("密碼解密後："+$.base64.decode(pwd)); $("#mima").val($.base64.decode(pwd)); //密碼存在的話把“記住使用者名稱和密碼”複選框勾選住 $("[name='jizhu']").attr("checked","true"); } } function login(){ var userName = $('#zhanghao').val(); console.log("使用者名稱："+userName); if(userName == ''){ alert("請輸入使用者名稱。"); return; } var userPass =$('#mima').val(); console.log("密碼："+userPass); if(userPass == ''){ alert("請輸入密碼。"); return; } //判斷是否選中複選框，如果選中，新增cookie var jizhupwd=$("input[type='checkbox']").is(':checked'); console.log("是否記住密碼："+jizhupwd); if(jizhupwd){ //新增cookie setCookie(); }else{ clearAllCookie(); } netWorking(userName,userPass);//聯網上傳賬號密碼 } function netWorking(zhanghao,mima){ $.ajax({ type:"post", url:loginurl, data:{ username:zhanghao, //期刊id password:mima, }, success: function(res) { console.log("請求資料1.："+res); console.log("請求資料2.："+JSON.stringify(res)); var datas=eval(res); var ticket=datas.ticket; //var ticket=datas.msg; console.log("請求資料2.："+ticket); if (ticket==undefined) { alert("請您先註冊"); } else{ window.location.href='htmls/home.html'; } }, error:function() { alert("失敗"); } }); }
</script> </body> </html>
原文：https://blog.csdn.net/qq_37164847/article/details/82700589?utm_source=cop