以下のエディターは、localStorge によって開発されたログイン モジュールに基づくパスワードの記憶と自動ログインの例を示します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう
このモジュール関数モジュールの起源については、これが Niao Da Da のデビューです。なぜこれを言うのですか？ある日、グループの友人が、**** モジュールを開発するプライベートな仕事があると言いました。その日は手がかゆくなったので、少しだけ話をしました。それから、私は彼女のためにこのモジュールを作ることにしました。納期について彼と話し合ったところ、遅くても2日後とのことで、追加の話になり、最終的には500元で合意に達しました。 ！ ！実際にこのモジュールを開発したのは初日の夜でした。その際、機能モジュールの開発はOKです、というメッセージを彼に送りました。問題がなければ提出します。しばらくしてから私に返信して、準備ができたら送ってください、と彼はここに来て、WeChat 経由で 500 人民元を送金しました。結局のところ、彼はプロジェクトを彼に渡しました。お客様には問題なく納品されました！今思うと、今でもワクワクしてます！その瞬間を記録する――2016年3月。
要約: Transmission のパスワード記憶モジュールと自動ログイン モジュールはどちらも Cookie に基づいていますが、Cookie で実行するにはいくつかの欠点があります。見てみると、Cookie ファイルのサイズは制限されているため、この質問で説明されている内容はストレージに基づいています。 H5 では、自動的にログインしてパスワードを記憶するためにローカル永続ストレージが使用されるため、ストレージについて理解していない場合は、最初に充電することをお勧めします。
充電: localstorge について学びましょう
注: これは Web ページ Zhihu を模倣したログイン モジュールです。完全なソース コードが必要な場合は、Birds にお問い合わせください
レンダリング:
。
コア ソース コードの共有:
<!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. パスワードを保存するがチェックされている場合、ユーザー名はコア コードのようにパスワードをストレージに保存します
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 (){}) で、つまりブラウザがタグをレンダリングするときに、コアコードのように storage['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";
}ログイン後にコピー
ユーザーが再ログインするとき、またはロード時に自動ログインをチェックするかどうかが判断されます。チェックされている場合は、ストレージからデータが取得され、非同期
リクエストが行われます。直接発生するため、ユーザーがログイン イベントをクリックする必要はありません。
りー
以上がLocalStorge 開発では、ログイン、パスワードの記憶、自動ログインの例を実装しています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
