基于localStorge开发登录模块的记住密码与自动登录

前沿||我是乐于分享，善于交流的鸟窝先做写一篇关于登录模块中记住密码与自动登录的模块。鸟窝微信：jkxx123321

关于这个模块功能模块的由来，这是鸟大大的处女秀，为什么这么说呢？一天在群里，一个哥们说有私活，开发一个****模块，我那天手痒痒就和他聊了两句，然后，就决定给她做这个模块了，和他谈了谈交付时间，他说最迟两天，然后谈了谈加个，最后达成，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"><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><div id="box"></div><div class="cent-box"><div class="cent-box-header"><h1 class="main-title hide">仿知乎</h1><h2 class="sub-title">生活热爱分享 - Thousands Find</h2></div><div class="cont-main clearfix"><div class="index-tab"><div class="index-slide-nav"><a href="login.html" class="active">登录</a><a href="register.html">注册</a><div class="slide-bar"></div></div></div><form id="loginform" name="loginform" autocomplete="on" method="post"><div class="login form"><div class="group"><div class="group-ipt email"><input type="email" name="email" id="email" class="ipt" placeholder="邮箱地址" required/></div><div class="group-ipt password"><input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required/></div></div></div><div class="button"><button type="button" class="login-btn register-btn" id="button" οnclick="login()">登录</button></div><div class="remember clearfix"><label for="loginkeeping" class="remember-me"><input type="checkbox" name="isRemberPwdId" id="isRemberPwdId" class="remember-mecheck" checked />记住密码&nbsp;</label><label for="autologin" class="forgot-password"><input type="checkbox" name="isAutoLoginId" id="isAutoLoginId" class="remember-mecheck" checked />自动登录&nbsp;</label></div></form></div></div><div class="footer"><p>仿知乎 - Thousands Find</p><p>copy@*.*  2016</p></div><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>

最后总结一下：

这个模块是通用的，我们要做的是：

1.当用户点击登录的时候，首先拿到表单里的数据
2.做出判断，判断用户是否勾选记住密码或者自动登录

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("系统错误");}});

好了，花了二十分钟，总结完毕，爱分享的鸟窝！

请随意打赏

(微信扫码)

转载于:https://www.cnblogs.com/gdsblog/p/7425917.html

基于localStorge开发登录模块的记住密码与自动登录相关推荐

android 自动登录机制,Android登录记住密码以及自动登录的实现
记住密码以及自动登录的实现主要依赖于SharedPreferences类的使用,SharedPreferences是一个轻量级的存储类,用于存储一些小数据,比如登录账号密码以及状态信息等. 本文章只针 ...
Android登录记住密码以及自动登录的实现
记住密码以及自动登录的实现主要依赖于SharedPreferences类的使用,SharedPreferences是一个轻量级的存储类,用于存储一些小数据,比如登录账号密码以及状态信息等. 本文章只针 ...
Cookie实现记住密码及自动登录
最近对华丹快速开发平台进行升级,需要对实现记住密码以及自动登录功能,下面主要说一下如何用cookie实现此功能. 一.什么是cookie? Cookie,有时也用其复数形式Cookies.是保存在客户 ...
业务系统实现记住密码和自动登录功能
业务系统实现记住密码和自动登录功能公司的业务系统本来是受域控的,用户不需要登录可以直接访问系统.当然,虽然不用人工登录,系统本身会读取电脑的用户名为登录标识,对系统操作权限和记录也是以电脑名.近段时 ...
EChat(简易聊天项目)六、实现记住密码和自动登录
利用SharedPreferences登录界面记住密码和自动登录 ①修改login_layout.xml文件,增加如下代码,即添加2个勾选框 <LinearLayoutandroid:orien ...
Winform 实现记住密码和自动登录
一般的软件都有记住密码和自动登录功能,所以今天说一种winform的记住方式. 效果: 关闭软件,再次打开时,密码已经填写好了,不需要输入. 点击登录也能校验成功,完美实现登录记住账号密码. 自动登录 ...
Android 记住密码和自动登录界面的实现（SharedPreferences 的用法）（转载）
SharedPreferences介绍: SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置参数,它是采用xml文件存放数据的,文件存放在" ...
Cookie实现记住密码、自动登录
前端代码 <form id="form" action="xxx" method="post"><div><i ...
引用借以记录借鉴实现记住密码和自动登录功能
WEB页面代码: <form id="Form1" runat="server"><input type="hidden" ...

基于localStorge开发登录模块的记住密码与自动登录

基于localStorge开发登录模块的记住密码与自动登录相关推荐

最新文章

热门文章