介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; title>登录——仿知乎-数以千计Find
& lt;链接rel=皊tylesheet"类型=拔谋?css"href=胺绺?register-login.css"rel=巴獠縩ofollow"比;
& lt;脚本类型=拔谋?javascript"src=癹s/jquery.min.js"祝辞& lt;/script>
& lt; script>
美元(文档)。准备好(函数(){//读取localStage本地存储,填充用户名密码,如果自动登录有值直接跳转;//相反,跳转到本页面,等待登陆处理
var存储=window.localStorage;
var getEmail=存储(“email");
var getPwd=存储(“password");
var getisstroepwd=存储(“isstorePwd");
var getisautologin=存储(“isautologin");
如果(“yes"==getisstroepwd) {
如果(“yes"==getisautologin) {
如果(((““!=getEmail) | |(零!=getEmail)),,(““零! !=getPwd) | | (=getPwd))) {//鳄鱼已经保存登陆信息直接登陆//警报(& # 39;正在自动登录& # 39;);
$ (“# email") .val (getEmail);
$ (“# password") .val (getPwd);//window.location=?“;//加载时显示:正在自动登录
. ajax({美元
url: & # 39; LoginServlet.ashx& # 39;
数据:{
电子邮件:getEmail,
密码:getPwd
},
数据类型:& # 39;json # 39;
成功:功能(数据){
如果(数据)。味精==啊?{
alert(“账号信息异常,请核实后重新登录“);
其他}{//警报(123);//登录成功后保存会话,如果选择了记住密码,再保存到本地
window.location。href=& # 39; Default2.aspx& # 39;;
}
},
错误:函数(){
alert(“系统错误“);
}
});
}
}
其他{
$ (“# email") .val (getEmail);
$ (“# password") .val (getPwd);
. getelementbyid (“isRemberPwdId")。检查=true;
}
}
});
函数登录(){
var userEmail=$ (“# email") .val ();
var userPassWord=$ (“# password") .val ();
如果(userEmail !=?“,,userPassWord !=啊? {
var存储=window.localStorage;//记住密码
如果(. getelementbyid (“isRemberPwdId")支票){//存储到loaclStage//警报(134);
存储(“email")=userEmail;
存储(“password")=userPassWord;
存储(“isstorePwd")=皔es";
}
其他{
存储(“email")=userEmail;
存储(“isstorePwd")=皀o";
}//下次自动登录
如果(. getelementbyid (“isAutoLoginId")支票){//存储到loaclStage
存储(“email")=userEmail;
存储(“password")=userPassWord;
存储(“isstorePwd")=皔es";
存储(“isautologin")=皔es";
}
其他{
存储(“email")=userEmail;
存储(“isautologin")=皀o";
}
. ajax({美元
url: & # 39; LoginServlet.ashx& # 39;
数据:{
“email": userEmail,
“password": userPassWord
},
数据类型:& # 39;json # 39;
成功:功能(数据){
如果(数据)。味精==啊?{
alert(“用户名或密码错误“);
其他}{
alert(“登陆成功“);//登录成功后保存会话,如果选择了记住密码,再保存到本地
window.location。href=& # 39; default . aspx # 39;;
}
},
错误:函数(){
alert(“系统错误1“);
}
});//警报(“登录成功“);
}
其他{
alert(“用户名密码不能为空“);
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; p id=癰ox"祝辞& lt;/p>
类& lt; p=癱ent-box"祝辞
类& lt; p=癱ent-box-header"祝辞
& lt; h2类=爸鞅晏鈎ide"在仿知乎& lt;/h2>
& lt; h3类=皊ub-title"祝辞生活热爱分享-数以千计Find
这篇文章将为大家详细讲解有关localStorge开发如何实现登录记住密码与自动登录的功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个哥们说有私活,开发一个* * * *模块,我那天手痒痒就和他聊了两句,然后,就决定给她做这个模块了,和他谈了谈交付时间,他说最迟两天,然后谈了谈加个,最后达成,500￥! ! !这个模块其实第一天晚上我就开发出来了,那时我给他微信说,功能模块开发好了,要不要远程查看一下,没问题的话就交了,一会他回我,好了就发过来,然后微信就转过来500￥,当时很诧异,毕竟是处女秀,然后就把项目交给他了,并且是完美交付,在客户那里,也没有出现问题!到如今想想,还激动啊!记录那个时刻——2016 - 3 .
摘要:传动的记住密码与自动登录模块,都是基于饼干,但是饼干上做的话,有一些弊端,鸟看了就是饼干文件大小受限,所以本问叙述的是基于H5上的仓储费,本地持久化存储来做的自动登录和记住密码的,所以如果你不懂仓储费的话,建议先去充电!
备注:这是一个仿网页知乎的登录模块,如果想要完整源码,可以联系鸟哦
核心源码分享:
