LocalStorge 開発では、ログイン、パスワードの記憶、自動ログインの例を実装しています。
以下のエディターは、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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7698
15
1640
14
1393
52
1287
25
1229
29
壁紙エンジンで別のアカウントにログインした後、他の人の壁紙をダウンロードした場合はどうすればよいですか?
Mar 19, 2024 pm 02:00 PM
自分のコンピュータで他人の Steam アカウントにログインし、その他人のアカウントに壁紙ソフトウェアがインストールされている場合、自分のアカウントに切り替えた後、Steam は他人のアカウントに登録されている壁紙を自動的にダウンロードします。 Steam クラウドの同期をオフにします。別のアカウントにログインした後に、wallpaperengine が他の人の壁紙をダウンロードした場合の対処方法 1. 自分の steam アカウントにログインし、設定でクラウド同期を見つけて、steam クラウド同期をオフにします。 2. 以前にログインしたことのある他の人の Steam アカウントにログインし、壁紙クリエイティブ ワークショップを開き、サブスクリプション コンテンツを見つけて、すべてのサブスクリプションをキャンセルします。 (将来壁紙が見つからない場合は、まず壁紙を収集してからサブスクリプションをキャンセルできます) 3. 自分の Steam に戻ります。
小紅書で以前のアカウントにログインするにはどうすればよいですか?再接続後に元の番号が失われた場合はどうすればよいですか?
Mar 21, 2024 pm 09:41 PM
ソーシャル メディアの急速な発展に伴い、Xiaohongshu は多くの若者が生活を共有し、新製品を探索するための人気のプラットフォームになりました。使用中に、ユーザーが以前のアカウントにログインできない場合があります。この記事では、Xiaohongshuで古いアカウントにログインできない問題の解決方法と、バインドを変更した後に元のアカウントが失われる可能性への対処方法について詳しく説明します。 1. 小紅書の前のアカウントにログインするにはどうすればよいですか? 1. パスワードを取得してログインします。Xiaohongshu に長期間ログインしない場合、アカウントがシステムによってリサイクルされる可能性があります。アクセス権を復元するには、パスワードを取得してアカウントへのログインを再試行します。操作手順は以下の通りです。 (1) 小紅書アプリまたは公式サイトを開き、「ログイン」ボタンをクリックします。 (2) 「パスワードを取得」を選択します。 (3) アカウント登録時に使用した携帯電話番号を入力してください
『陰陽師』茨木童子のコレクションスキンはログインするとすぐに入手できるほか、新スキン「禅心雲鏡」も近日登場予定！
Jan 05, 2024 am 10:42 AM
山野に数千の亡霊の叫び声が響き、武器を取り交わす音が消え、闘志を胸に山を越えて駆けつけた亡霊将軍たちは火をラッパに吹き、数百の亡霊を率いて突撃した。戦いへ。 【烈火の梅蓮・茨木童子コレクションスキンがオンライン販売開始】 炎が燃え盛る幽霊の角、荒々しい闘志がほとばしる金色の瞳、そしてシャツを彩る白翡翠の甲冑は、偉大なる者の手に負えない野性的な勢いを表しています。悪魔。雪のように白くはためく袖には、赤い炎が絡みつき、金の模様が刻まれ、紅く幻想的な色を灯した。凝縮された悪魔の力によって形成された意志のウィスプが咆哮し、激しい炎が山を揺るがしました煉獄から戻った悪魔と幽霊、一緒に侵入者を懲らしめましょう。 【専用ダイナミックアバターフレーム・烈火の炎のバイリアン】 【専用イラスト・花火将軍魂】 【伝記鑑賞】 【入手方法】 茨木童子のコレクションスキン・烈火の炎のバイリアンは、12月28日メンテナンス後よりスキンストアに登場いたします。
バックグラウンドログインの問題の解決策を明らかにする
Mar 03, 2024 am 08:57 AM
Discuz のバックグラウンド ログイン問題の解決策が明らかになりました。特定のコード サンプルが必要です。インターネットの急速な発展に伴い、Web サイトの構築がますます一般的になってきました。Discuz は、一般的に使用されるフォーラム Web サイト構築システムとして、次のユーザーに好まれています。多くのウェブマスター。しかし、その強力な機能ゆえに、Discuz を使用する際にバックグラウンドでのログインの問題などの問題が発生することがあります。本日は、Discuz のバックグラウンド ログインの問題の解決策を明らかにし、具体的なコード例を提供します。
Kuaishou PC 版へのログイン方法 - Kuaishou PC 版へのログイン方法
Mar 04, 2024 pm 03:30 PM
最近、何人かの友人が Kuaishou コンピュータ版へのログイン方法を尋ねてきました。ここでは Kuaishou コンピュータ版へのログイン方法を説明します。必要な友人が来て、さらに詳しく学ぶことができます。ステップ 1: まず、コンピュータのブラウザで Baidu の Kuaishou 公式 Web サイトを検索します。ステップ 2: 検索結果リストの最初の項目を選択します。ステップ 3: Kuaishou 公式ウェブサイトのメインページに入った後、ビデオオプションをクリックします。ステップ 4: 右上隅にあるユーザーのアバターをクリックします。ステップ 5: QR コードをクリックして、ポップアップ ログイン メニューでログインします。ステップ 6: 次に、携帯電話で Kuaishou を開き、左上隅のアイコンをクリックします。ステップ 7: QR コードのロゴをクリックします。ステップ 8: My QR コード インターフェイスの右上隅にあるスキャン アイコンをクリックした後、コンピューター上の QR コードをスキャンします。ステップ 9: 最後に、Kuaishou のコンピュータ版にログインします。
Windows 11/10にGitHub Copilotをインストールする方法
Oct 21, 2023 pm 11:13 PM
GitHubCopilot は、コードを適切に予測してオートコンプリートする AI ベースのモデルを備えた、プログラマーにとっての次のレベルです。ただし、この AI の天才をデバイスに導入して、コーディングをさらに簡単にする方法を疑問に思っているかもしれません。ただし、GitHub の使用は必ずしも簡単ではなく、初期設定プロセスは難しいものです。したがって、Windows 11、10 の VSCode に GitHub Copilot をインストールして実装する方法に関するステップバイステップのチュートリアルを作成しました。 Windows に GitHubCopilot をインストールする方法 このプロセスにはいくつかの手順があります。したがって、今すぐ以下の手順に従ってください。ステップ 1 – 最新バージョンの Visual Studio がコンピューターにインストールされている必要があります
Quarkで2つのデバイスにログインする方法
Feb 23, 2024 pm 10:55 PM
Quark を使用して 2 つのデバイスにログインするにはどうすればよいですか? Quark Browser は 2 つのデバイスへの同時ログインをサポートしていますが、ほとんどの友人は Quark Browser を使用して 2 つのデバイスにログインする方法を知りません。次に、エディターがユーザー Quark にログインさせます。メソッド グラフィック チュートリアル、興味のあるユーザーはぜひ見に来てください。 Quark Browserの使い方チュートリアル Quark 2台のデバイスにログインする方法 1. まずQuark Browser APPを開き、メインページで[Quark Network Disk]をクリックします; 2. 次に、Quark Network Diskインターフェイスに入り、[My Backup]サービス機能を選択します; 3. 最後に、[デバイスの切り替え]を選択して、2 台の新しいデバイスにログインします。
パソコン版の WeChat にログインできないのはなぜですか?
Aug 18, 2023 pm 02:07 PM
パソコン版 WeChat にログインできない原因は、ネットワーク接続の問題、アカウントとパスワードの誤入力、WeChat サーバーの障害、オペレーティング システムまたはアプリケーションの問題、アカウントの禁止または異常なログインなどが原因です。詳細な紹介: 1. ネットワーク接続の問題、ネットワークに再接続するか、ネットワーク環境を変更してみてください; 2. アカウントとパスワードの入力が間違っています。モバイル バージョンの WeChat を使用してログインして、アカウントとパスワードが正しいかどうかを確認してください。 . WeChat サーバー障害が発生した場合は、一定時間待機してください 再度ログインしてみてください; 4. オペレーティング システムまたはアプリケーションの問題がある場合は、オペレーティング システムまたは WeChat アプリケーションなどを更新してみてください。
