localStorge开发实现登录记住密码与自动登录实例
互联网
18-5-18
下面小编就为大家带来一篇基于localStorge开发登录模块的记住密码与自动登录实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于这个模块功能模块的由来，这是鸟大大的处女秀，为什么这么说呢？一天在群里，一个哥们说有私活，开发一个****模块，我那天手痒痒就和他聊了两句，然后，就决定给她做这个模块了，和他谈了谈交付时间，他说最迟两天，然后谈了谈加个，最后达成，500￥！！！这个模块其实第一天晚上我就开发出来了，那时我给他微信说，功能模块开发ok了，要不要远程查看一下，没问题的话就交了，一会他回我，好了就发过来，然后微信就转过来500￥，当时很诧异，毕竟是处女秀，然后就把项目交给他了，并且是完美交付，在客户那里，也没有出现问题！到如今想想，还激动啊！记录那个时刻--2016-3。
摘要：传动的记住密码与自动登录模块，都是基于cookie，但是cookie上做的话，有一些弊端，鸟看了就是cookie文件大小受限，所以本问叙述的是基于H5上的storge，本地持久化存储来做的自动登录和记住密码的，所以如果你不懂storge的话，建议先去充电！
充电：了解localstorge
备注：这是一个仿网页知乎的登录模块，如果想要完整源码，可以联系鸟哦
效果图：
核心源码分享：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>登录 - 仿知乎 - Thousands Find</title> <link rel="stylesheet" type="text/css" href="style/register-login.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function () { //读取 localStage 本地存储，填充用户名密码,如果自动登录有值直接跳转； //相反，跳转到本页面,等待登陆处理 var storage = window.localStorage; var getEmail = storage["email"]; var getPwd = storage["password"]; var getisstroepwd = storage["isstorePwd"]; var getisautologin = storage["isautologin"]; if ("yes" == getisstroepwd) { if ("yes" == getisautologin) { if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) { //lacoste 已经保存 登陆信息 直接登陆 //alert('正在自动登录'); $("#email").val(getEmail); $("#password").val(getPwd); // window.location=""; //加载时显示：正在自动登录 $.ajax({ url: 'LoginServlet.ashx', data: { email: getEmail, password: getPwd }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("账号信息异常，请核实后重新登录"); } else { //alert(123); //登录成功后保存session，如果选择了记住密码，再保存到本地 window.location.href ='Default2.aspx'; } }, error: function () { alert("系统错误"); } }); } } else { $("#email").val(getEmail); $("#password").val(getPwd); document.getElementById("isRemberPwdId").checked = true; } } }); function login() { var userEmail = $("#email").val(); var userPassWord = $("#password").val(); if (userEmail != "" && userPassWord != "") { var storage = window.localStorage; //记住密码 if (document.getElementById("isRemberPwdId").checked) { //存储到loaclStage //alert(134); storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; } else { storage["email"] = userEmail; storage["isstorePwd"] = "no"; } //下次自动登录 if (document.getElementById("isAutoLoginId").checked) { //存储到loaclStage storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; storage["isautologin"] = "yes"; } else { storage["email"] = userEmail; storage["isautologin"] = "no"; } $.ajax({ url: 'LoginServlet.ashx', data: { "email": userEmail, "password": userPassWord }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("用户名或密码错误"); } else { alert("登陆成功"); //登录成功后保存session，如果选择了记住密码，再保存到本地 window.location.href = 'Default.aspx'; } }, error: function () { alert("系统错误1"); } }); //alert("登录成功"); } else { alert("用户名密码不能为空"); } } </script> </head> <body> <p id="box"></p> <p class="cent-box"> <p class="cent-box-header"> <h1 class="main-title hide">仿知乎</h1> <h2 class="sub-title">生活热爱分享 - Thousands Find</h2> </p> <p class="cont-main clearfix"> <p class="index-tab"> <p class="index-slide-nav"> <a href="login.html" rel="external nofollow" class="active">登录</a> <a href="register.html" rel="external nofollow" >注册</a> <p class="slide-bar"></p> </p> </p> <form id="loginform" name="loginform" autocomplete="on" method="post"> <p class="login form"> <p class="group"> <p class="group-ipt email"> <input type="email" name="email" id="email" class="ipt" placeholder="邮箱地址" required/> </p> <p class="group-ipt password"> <input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required/> </p> </p> </p> <p class="button"> <button type="button" class="login-btn register-btn" id="button" onclick="login()">登录</button> </p> <p class="remember clearfix"> <label for="loginkeeping" class="remember-me"> <input type="checkbox" name="isRemberPwdId" id="isRemberPwdId" class="remember-mecheck" checked /> 记住密码 </label> <label for="autologin" class="forgot-password"> <input type="checkbox" name="isAutoLoginId" id="isAutoLoginId" class="remember-mecheck" checked /> 自动登录 </label> </p> </form> </p> </p> <p class="footer"> <p>仿知乎 - Thousands Find</p> <p>copy@*.* 2016</p> </p> <script src='js/particles.js' type="text/javascript"></script> <script src='js/background.js' type="text/javascript"></script> <script src='js/jquery.min.js' type="text/javascript"></script> <script src='js/layer/layer.js' type="text/javascript"></script> <script src='js/index.js' type="text/javascript"></script> </body> </html>最后总结一下：
这个模块是通用的，我们要做的是：
3.都没勾选，对数据进行加密，发到服务器端做登录校验，之后返回
4.勾选了记住密码，就将用户名密码保存到storge，核心代码赞一下
var storage = window.localStorage; //记住密码 if (document.getElementById("isRemberPwdId").checked) { //存储到loaclStage //alert(134); storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; } else { storage["email"] = userEmail; storage["isstorePwd"] = "no"; }记住，这时你已经勾选了记住密码，下次登录时，该如何操作？
在$(function (){})里，也就是浏览器渲染标签时，做出判断，看一下storge['isstorePwd']是否为yes，核心代码赞一赞
$(document).ready(function () { //读取 localStage 本地存储，填充用户名密码,如果自动登录有值直接跳转； //相反，跳转到本页面,等待登陆处理 var storage = window.localStorage; var getEmail = storage["email"]; var getPwd = storage["password"]; var getisstroepwd = storage["isstorePwd"]; var getisautologin = storage["isautologin"]; if ("yes" == getisstroepwd) { if ("yes" == getisautologin) { .... } } else { $("#email").val(getEmail); $("#password").val(getPwd); document.getElementById("isRemberPwdId").checked = true; } } });ok 如果记住密码就搞定了！
5.自动登录：这个功能还用我说吗？和记住密码类似!
//下次自动登录 if (document.getElementById("isAutoLoginId").checked) { //存储到loaclStage storage["email"] = userEmail; storage["password"] = userPassWord;//密码存到storage里 storage["isstorePwd"] = "yes"; storage["isautologin"] = "yes"; } else { storage["email"] = userEmail; storage["isautologin"] = "no"; }当用户再次登录的时候，还是在一加载的时候，做出判断，是否勾选自动登录，勾选的话，从storage里拿到数据，直接发生异步
请求，就不用用户做出点击登录事件了！
if ("yes" == getisautologin) { if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) { //lacoste 已经保存 登陆信息 直接登陆 //alert('正在自动登录'); $("#email").val(getEmail); $("#password").val(getPwd); // window.location=""; //加载时显示：正在自动登录 $.ajax({ url: 'LoginServlet.ashx', data: { email: getEmail, password: getPwd }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("账号信息异常，请核实后重新登录"); } else { //alert(123); //登录成功后保存session，如果选择了记住密码，再保存到本地 window.location.href ='Default2.aspx'; } }, error: function () { alert("系统错误"); } });以上就是localStorge开发实现登录记住密码与自动登录实例的详细内容，更多内容请关注技术你好其它相关文章！
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
相关资讯
扫码关注公众号
技术文章 / 下载软件
趣味内容 / 专业带飞
