L'éditeur suivant vous apportera un exemple de mémorisation de mots de passe et de connexion automatique basé sur le module de connexion développé par localStorge. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil
Concernant l'origine de ce module fonction, c'est le début de Niao Da Da. Pourquoi dites-vous cela ? Un jour dans le groupe, un copain m'a dit qu'il avait un travail privé pour développer un module ****. J'ai discuté quelques mots avec lui parce que mes mains me démangeaient ce jour-là. Ensuite, j'ai décidé de faire ce module pour elle. . J'ai parlé avec lui du délai de livraison. Il a dit deux jours au plus tard, puis nous avons parlé d'en ajouter un, et nous sommes finalement parvenus à un accord de 500 yuans ! ! ! En fait, j'ai développé ce module la première nuit, à ce moment-là, je lui ai envoyé un message WeChat disant que le développement du module fonctionnel était OK. Voulez-vous le vérifier à distance ? répondez-moi après un moment et envoyez-le quand il est prêt. Il est venu ici et a transféré 500 RMB via WeChat. Après tout, c'était ses débuts. Puis il lui a confié le projet. a été parfaitement livré. Il n'y a eu aucun problème avec le client ! En y repensant maintenant, je suis toujours excité ! Enregistrez ce moment – 2016-3.
Résumé : Les modules de mémorisation du mot de passe et de connexion automatique de Transmission sont tous deux basés sur des cookies, mais il y a certains inconvénients à le faire avec des cookies. Si vous le regardez, la taille du fichier de cookie est limitée, alors ce que décrit cette question. est basé sur des cookies. Le stockage sur H5 utilise le stockage persistant local pour se connecter automatiquement et mémoriser les mots de passe, donc si vous ne comprenez pas le stockage, il est recommandé de le charger d'abord !
Charge : Comprendre localstorge
Remarque : Il s'agit d'un module de connexion imitant la page Web Zhihu. Si vous souhaitez le code source complet, vous. peut contacter Bird Oh
Rendu :
Partage du code source principal :
<!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>Copier après la connexion
Enfin, pour résumer :
Ce module est universel, ce que nous devons faire est de :
Lorsque l'utilisateur clique pour se connecter, récupérez d'abord les données dans le formulaire <. 🎜> 2. Faites un jugement pour déterminer si l'utilisateur a vérifié la mémorisation du mot de passe ou s'est connecté automatiquement
3 Si aucune des deux n'est cochée, les données sont cryptées et envoyées au serveur pour vérification de connexion, puis renvoyées.
4. Si Mémoriser le mot de passe est coché, le nom d'utilisateur et le mot de passe seront enregistrés dans le stockage comme le code principal
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";
}Copier après la connexion
À ce stade, vous avez coché Mémoriser le mot de passe. La prochaine fois que vous vous connecterez, ce sera Comment faire ?
Dans $(function (){}), c'est-à-dire lorsque le navigateur restitue la balise, portez un jugement et voyez si le stockage['isstorePwd'] est oui Comme le code principal
< 🎜. >
ok Si vous vous souvenez du mot de passe, vous avez terminé !
$(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;
}
}
});Copier après la connexion
5. Connexion automatique : Dois-je encore parler de cette fonction ? Semblable à la mémorisation des mots de passe !
Lorsque l'utilisateur se reconnecte ou lors du chargement, décidez s'il doit vérifier la connexion automatique. Si tel est le cas, récupérez les données du stockage asynchrone. > la requête s'effectue directement, l'utilisateur n'a donc pas besoin de cliquer sur l'événement de connexion !
//下次自动登录
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";
}Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
