LocalStorge 開発では、ログイン、パスワードの記憶、自動ログインの例を実装しています。-C#.Net チュートリアル-php.cn

ホームページ

バックエンド開発

C#.Net チュートリアル

LocalStorge 開発では、ログイン、パスワードの記憶、自動ログインの例を実装しています。

巴扎黑

May 18, 2018 pm 05:11 PM

ログイン

以下のエディターは、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(&#39;正在自动登录&#39;); 
            $("#email").val(getEmail);
            $("#password").val(getPwd);
            // window.location="";   
            //加载时显示：正在自动登录 
            $.ajax({
              url: &#39;LoginServlet.ashx&#39;,
              data: {
                email: getEmail,
                password: getPwd
              },
              
              dataType: &#39;json&#39;,
              success: function (data) {
                if (data.msg == "") {
                  alert("账号信息异常，请核实后重新登录");
                } else {
                  //alert(123);
                  //登录成功后保存session，如果选择了记住密码，再保存到本地 
                  window.location.href =&#39;Default2.aspx&#39;; 
                }
              },
              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: &#39;LoginServlet.ashx&#39;,
          data: {
            "email": userEmail,
            "password": userPassWord
          },
          dataType: &#39;json&#39;,
          success: function (data) {
            if (data.msg == "") {
              alert("用户名或密码错误");
            } else {
              alert("登陆成功");
              //登录成功后保存session，如果选择了记住密码，再保存到本地 
              window.location.href = &#39;Default.aspx&#39;;
            }
          },
          error: function () {
            alert("系统错误1");
          }
        });
        //alert("登录成功");
      }
      else {
        alert("用户名密码不能为空");
      }
    }
    
  </script>
</head>
<body>
  <p id="box"></p>
  <p class="cent-box">
    <p class="cent-box-header">
      <h1 id="仿知乎">仿知乎</h1>
      <h2 id="生活热爱分享-nbsp-nbsp-Thousands-nbsp-Find">生活热爱分享 - 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=&#39;js/particles.js&#39; type="text/javascript"></script>
  <script src=&#39;js/background.js&#39; type="text/javascript"></script>
  <script src=&#39;js/jquery.min.js&#39; type="text/javascript"></script>
  
  <script src=&#39;js/layer/layer.js&#39; type="text/javascript"></script>
  <script src=&#39;js/index.js&#39; 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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Web、デスクトップ、モバイル開発用のC＃.NETApr 25, 2025 am 12:01 AM

C＃と.NETは、Web、デスクトップ、モバイル開発に適しています。 1）Web開発では、ASP.Netcoreがクロスプラットフォーム開発をサポートしています。 2）デスクトップ開発では、さまざまなニーズに適したWPFとWINFORMSを使用します。 3）モバイル開発は、Xamarinを介したクロスプラットフォームアプリケーションを実現します。

C＃.NETエコシステム：フレームワーク、ライブラリ、およびツールApr 24, 2025 am 12:02 AM

C＃.NETエコシステムは、開発者がアプリケーションを効率的に構築できるようにするための豊富なフレームワークとライブラリを提供します。 1.ASP.NETCOREは、高性能Webアプリケーションの構築に使用されます。2.EntityFrameWorkCoreは、データベース操作に使用されます。これらのツールの使用とベストプラクティスを理解することにより、開発者はアプリケーションの品質とパフォーマンスを向上させることができます。

azure/awsへのc＃.netアプリケーションの展開：ステップバイステップガイドApr 23, 2025 am 12:06 AM

c＃.netアプリをAzureまたはAWSに展開する方法は？答えは、AzureAppServiceとAwselasticBeanStalkを使用することです。 1。Azureでは、AzureAppServiceとAzurePipelinesを使用して展開を自動化します。 2。AWSでは、Amazon ElasticBeanstalkとAwslambdaを使用して、展開とサーバーレス計算を実装します。

C＃.NET：強力なプログラミング言語の紹介Apr 22, 2025 am 12:04 AM

C＃と.NETの組み合わせにより、開発者に強力なプログラミング環境を提供します。 1）C＃は、多型と非同期プログラミングをサポートします。2）.NETは、クロスプラットフォーム機能と同時処理メカニズムを提供し、デスクトップ、Web、モバイルアプリケーション開発で広く使用されています。

.NETフレームワーク対C＃：用語のデコードApr 21, 2025 am 12:05 AM

.NetFrameworkはソフトウェアフレームワークであり、C＃はプログラミング言語です。 1..netframeworkは、デスクトップ、Web、モバイルアプリケーションの開発をサポートするライブラリとサービスを提供します。 2.C＃は.NetFrameWork用に設計されており、最新のプログラミング機能をサポートしています。 3..NetFrameworkはCLRを介してコード実行を管理し、C＃コードはILにコンパイルされ、CLRによって実行されます。 4. .NetFrameWorkを使用してアプリケーションをすばやく開発し、C＃はLINQなどの高度な関数を提供します。 5.一般的なエラーには、タイプ変換と非同期プログラミングデッドロックが含まれます。 VisualStudioツールは、デバッグに必要です。

C＃.NETの分解：初心者の概要Apr 20, 2025 am 12:11 AM

C＃は、Microsoftが開発した最新のオブジェクト指向プログラミング言語であり、.NETはMicrosoftが提供する開発フレームワークです。 C＃は、CのパフォーマンスとJavaのシンプルさを組み合わせており、さまざまなアプリケーションの構築に適しています。 .NETフレームワークは、複数の言語をサポートし、ガベージコレクションメカニズムを提供し、メモリ管理を簡素化します。

C＃と.NETランタイム：それらがどのように連携するかApr 19, 2025 am 12:04 AM

C＃と.NETランタイムは密接に連携して、開発者に効率的で強力なプラットフォームの開発機能に力を与えます。 1）C＃は、.NETフレームワークとシームレスに統合するように設計されたタイプセーフおよびオブジェクト指向のプログラミング言語です。 2）.NETランタイムは、C＃コードの実行を管理し、ガベージコレクション、タイプの安全性、その他のサービスを提供し、効率的でクロスプラットフォームの操作を保証します。

C＃.NET開発：始めるための初心者向けガイドApr 18, 2025 am 12:17 AM

C＃.NET開発を開始するには、次のことが必要です。1。C＃の基本的な知識と.NETフレームワークのコア概念を理解する。 2。変数、データ型、制御構造、関数、クラスの基本概念をマスターします。 3。LINQや非同期プログラミングなど、C＃の高度な機能を学習します。 4.一般的なエラーのためのデバッグテクニックとパフォーマンス最適化方法に精通してください。これらの手順を使用すると、C＃.NETの世界に徐々に浸透し、効率的なアプリケーションを書き込むことができます。

See all articles