Der folgende Editor zeigt Ihnen ein Beispiel für das Merken von Passwörtern und die automatische Anmeldung basierend auf dem von localStorge entwickelten Anmeldemodul. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen
In Bezug auf den Ursprung dieses Moduls ist dies das Debüt von Niao Da Da. Eines Tages sagte ein Kumpel in der Gruppe, dass er einen privaten Auftrag hätte, ein ****-Modul zu entwickeln. Ich unterhielt mich ein paar Worte mit ihm, weil meine Hände an diesem Tag juckten. Dann beschloss ich, dieses Modul für sie zu erstellen . Ich habe mit ihm über die Lieferzeit gesprochen, und dann haben wir darüber gesprochen, einen Tag hinzuzufügen, und haben uns schließlich auf 500 Yuan geeinigt! ! ! Ich habe dieses Modul tatsächlich am ersten Abend entwickelt und ihm gesagt, dass die funktionale Modulentwicklung in Ordnung sei. Wenn es kein Problem gibt, werde ich es einreichen Antworte mir nach einer Weile und schicke es, wenn es fertig ist. Er war damals sehr überrascht. Dann übergab er es ihm wurde perfekt geliefert. Es gab keine Probleme mit dem Kunden! Wenn ich jetzt darüber nachdenke, bin ich immer noch aufgeregt! Halten Sie diesen Moment fest – 2016-3.
Zusammenfassung: Die Passwortspeicherung und die automatische Anmeldung von Transmission basieren beide auf Cookies, aber es gibt einige Nachteile, wenn man es mit Cookies macht. Wenn man es sich anschaut, ist die Größe der Cookie-Datei begrenzt, was diese Frage beschreibt basiert auf Cookies. Die Speicherung auf H5 nutzt lokalen persistenten Speicher, um sich automatisch anzumelden und sich Passwörter zu merken. Wenn Sie sich also nicht mit der Speicherung auskennen, wird empfohlen, diese zuerst aufzuladen!
Aufladen: Localstorge verstehen
Hinweis: Dies ist ein Anmeldemodul, das die Webseite Zhihu nachahmt. Wenn Sie den vollständigen Quellcode benötigen kann Bird Oh kontaktieren
Rendering:
Kernquellcode-Sharing:
<!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>Nach dem Login kopieren
Abschließend noch eine Zusammenfassung:
Dieses Modul ist universell. Was wir tun müssen, ist:
1 Wenn der Benutzer zum Anmelden klickt, rufen Sie zunächst die Daten im Formular ab
2. Treffen Sie eine Beurteilung, um festzustellen, ob der Benutzer aktiviert hat, um sich das Passwort zu merken oder sich automatisch anzumelden.
3 Wenn keines von beiden aktiviert ist, werden die Daten verschlüsselt, zur Anmeldeüberprüfung an den Server gesendet und dann zurück zu
4 . Wenn „Kennwort speichern“ aktiviert ist, werden der Benutzername und das Kennwort wie der Kerncode gespeichert Wenn Sie sich das nächste Mal anmelden, wird Folgendes angezeigt: Wie geht das?
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";
}Nach dem Login kopieren
In $(function (){}), das heißt, wenn der Browser das Tag rendert, beurteilen Sie, ob storage['isstorePwd'] Ja ist.
ok Wenn Sie sich an das Passwort erinnern, sind Sie fertig!
$(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;
}
}
});Nach dem Login kopieren
5. Automatische Anmeldung: Muss ich noch über diese Funktion sprechen? Ähnlich wie beim Merken von Passwörtern!
Entscheiden Sie, ob die automatische Anmeldung überprüft werden soll.
//下次自动登录
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";
}Nach dem Login kopieren
Die Anfrage erfolgt direkt, sodass der Benutzer nicht auf das Anmeldeereignis klicken muss!
Das obige ist der detaillierte Inhalt vonDie LocalStorge-Entwicklung implementiert Beispiele für Anmeldung, Passwortspeicherung und automatische Anmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
