localStorge开发实现登录记住密码与自动登录实例
下面小编就为大家带来一篇基于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>最后总结一下：
这个模块是通用的，我们要做的是：
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("系统错误");
}
});以上是localStorge开发实现登录记住密码与自动登录实例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
wallpaperengine登录别的号后下载别人的壁纸怎么办
Mar 19, 2024 pm 02:00 PM
当你在自己电脑上登过别人steam账号之后，恰巧这个别人的账号也有wallpaper软件，切换回自己账号之后steam就会自动下载别人账号订阅的壁纸，用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号，在设置里面找到云同步，关闭steam云同步。2、登陆你之前登陆的别人的steam账号，打开wallpaper创意工坊，找到订阅内容，然后取消全部订阅。（以后防止找不到壁纸，可以先收藏再取消订阅）3、切换回自己的stea
小红书怎么登录以前的账号？它换绑后原来号丢失了怎么办？
Mar 21, 2024 pm 09:41 PM
随着社交媒体的迅速发展，小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中，有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题，以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号？1.找回密码登录如果长时间未登录小红书，可能导致账号被系统回收。为了恢复访问权限，你可以尝试通过找回密码的方式重新登录账号。操作步骤如下：（1）打开小红书App或官网，点击“登录”按钮。（2）选择“找回密码”。（3）输入你注册账号时所使用的手机号码
《阴阳师》茨木童子典藏皮肤登录即领，禅心云外镜新皮肤即将上线！
Jan 05, 2024 am 10:42 AM
山野间万鬼嘶鸣，隐没兵刃交接之声，越岭奔赴而来的鬼将，心中战意汹涌，以炎火为号，率百鬼冲锋迎战。【炽焱百炼•茨木童子典藏皮肤上线】鬼角炽焰怒燃，鎏金眼眸迸发桀骜战意，白玉甲片装点战袍，彰显大妖不羁狂放的气势。雪白飘扬的袖摆上，赤焰攀附交织，金纹烙印其中，燃点一片绯艳妖异色彩。妖力凝聚而成的鬼火咆哮而至，烈焰令群峦为之震动，炼狱间归来的妖鬼啊，一同惩戒进犯之人吧。【专属动态头像框•炽焱百炼】【专属插画•焰火将魂】【传记鉴赏】【获取方式】茨木童子典藏皮肤·炽焱百炼将于12月28日维护后上架皮肤商店，
Discuz后台登录问题解决方法大揭秘
Mar 03, 2024 am 08:57 AM
Discuz后台登录问题解决方法大揭秘，需要具体代码示例随着互联网的快速发展，网站建设变得越来越普遍，而Discuz作为一款常用的论坛建站系统，受到了许多站长的青睐。然而，正是因为其功能强大，有时候我们在使用Discuz的过程中会遇到一些问题，比如后台登录问题。今天，我们就来大揭秘Discuz后台登录问题的解决方法，并且提供具体的代码示例，希望能帮助到有需要
快手电脑版怎么登录-快手电脑版的登录方法
Mar 04, 2024 pm 03:30 PM
近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法，有需要的小伙伴可以来了解了解哦。第一步：首先在电脑的浏览器上百度搜索快手官网。第二步：在搜索结果列表里面选取第一条。第三步：进入到快手官网主页面后，点击视频的选项。第四步：点击右上角的用户头像。第五步：在弹出的登录菜单里面点击二维码登录。第六步：之后打开手机上的快手，点击左上角的图标。第七步：点击二维码标志。第八步：在我的二维码界面点击右上角的扫描图标之后，扫描电脑上的二维码即可。第九步：最后电脑版的快手就登录成
夸克怎么登录两个设备
Feb 23, 2024 pm 10:55 PM
夸克怎么登录两个设备?夸克浏览器是支持同时登陆两个设备的，但是多数的小伙伴不知道夸克浏览器如何登陆两个设备，接下来就是小编为用户带来的夸克登陆两个设备方法图文教程，感兴趣的用户快来一起看看吧！夸克浏览器使用教程夸克怎么登录两个设备1、首先打开夸克浏览器APP，主页面点击【夸克网盘】;2、接着进入到夸克网盘界面，选择【我的备份】服务功能;3、最后选择其中的【切换设备】即可更换新设备登陆两个。
百度网盘网页版怎么进？百度网盘网页版登录入口
Mar 13, 2024 pm 04:58 PM
百度网盘不仅能储存各种软件资源，还能分享给别人，支持多端同步，如果你的电脑没有下载客户端，可以选择进入网页版使用。那么百度网盘网页版怎么登入呢？下面就来看看详细介绍。 百度网盘网页版登录入口：https://pan.baidu.com（复制链接到浏览器打开） 软件介绍 1、分享 提供文件分享功能，用户将文件整理，分享给需要的小伙伴。 2、云端 不占用太多内存，大多数文件都保存在云端，有效节省电脑空间。 3、相册 支持云相册功能，将照片导入到云盘中，然后整理，方便大家查看。
如何在 Windows 11/10 上安装 GitHub Copilot
Oct 21, 2023 pm 11:13 PM
GitHubCopilot是编码人员的下一个级别，它基于AI的模型可以成功预测和自动完成您的代码。但是，您可能想知道如何在您的设备上加入这个AI天才，以便您的编码变得更加容易！但是，使用GitHub并不是很容易，初始设置过程是一个棘手的过程。因此，我们创建了这个分步教程，介绍如何在Windows11、10上的VSCode中安装和实现GitHubCopilot。如何在Windows上安装GitHubCopilot此过程有几个步骤。因此，请立即执行以下步骤。步骤1–您必须在计算机上安装最新版本的可视
