localStorge开发实现登录记住密码与自动登录实例-Tutorial C#.Net-php.cn

Rumah

pembangunan bahagian belakang

Tutorial C#.Net

localStorge开发实现登录记住密码与自动登录实例

巴扎黑

May 18, 2018 pm 05:11 PM

Log masuk

下面小编就为大家带来一篇基于localStorge开发登录模块的记住密码与自动登录实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

关于这个模块功能模块的由来，这是鸟大大的处女秀，为什么这么说呢？一天在群里，一个哥们说有私活，开发一个****模块，我那天手痒痒就和他聊了两句，然后，就决定给她做这个模块了，和他谈了谈交付时间，他说最迟两天，然后谈了谈加个，最后达成，500￥！！！这个模块其实第一天晚上我就开发出来了，那时我给他微信说，功能模块开发ok了，要不要远程查看一下，没问题的话就交了，一会他回我，好了就发过来，然后微信就转过来500￥，当时很诧异，毕竟是处女秀，然后就把项目交给他了，并且是完美交付，在客户那里，也没有出现问题！到如今想想，还激动啊！记录那个时刻--2016-3。

摘要：传动的记住密码与自动登录模块，都是基于cookie，但是cookie上做的话，有一些弊端，鸟看了就是cookie文件大小受限，所以本问叙述的是基于H5上的storge，本地持久化存储来做的自动登录和记住密码的，所以如果你不懂storge的话，建议先去充电！

充电：了解localstorge

备注：这是一个仿网页知乎的登录模块，如果想要完整源码，可以联系鸟哦

效果图：

核心源码分享：

<!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 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=&#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>

Salin selepas log masuk

最后总结一下：

这个模块是通用的，我们要做的是：

1.当用户点击登录的时候，首先拿到表单里的数据
2.做出判断，判断用户是否勾选记住密码或者自动登录

3.都没勾选，对数据进行加密，发到服务器端做登录校验，之后返回

4.勾选了记住密码，就将用户名密码保存到storge，核心代码赞一下

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";
        }

Salin selepas log masuk

记住，这时你已经勾选了记住密码，下次登录时，该如何操作？

在$(function (){})里，也就是浏览器渲染标签时，做出判断，看一下storge['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;
        }
      }
    });

Salin selepas log masuk

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";
        }

Salin selepas log masuk

当用户再次登录的时候，还是在一加载的时候，做出判断，是否勾选自动登录，勾选的话，从storage里拿到数据，直接发生异步

请求，就不用用户做出点击登录事件了！

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("系统错误");
              }
            });

Salin selepas log masuk

Atas ialah kandungan terperinci localStorge开发实现登录记住密码与自动登录实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7466

Tutorial CakePHP

1376

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Apakah yang perlu saya lakukan jika saya memuat turun kertas dinding orang lain selepas log masuk ke akaun lain pada mesin kertas dinding? Mar 19, 2024 pm 02:00 PM

Apabila anda log masuk ke akaun stim orang lain pada komputer anda, dan akaun orang lain itu kebetulan mempunyai perisian kertas dinding, stim akan memuat turun kertas dinding yang dilanggan ke akaun orang lain secara automatik selepas bertukar kembali ke akaun anda sendiri Pengguna boleh menyelesaikan masalah ini dengan mematikan penyegerakan awan wap. Apa yang perlu dilakukan jika enjin kertas dinding memuat turun kertas dinding orang lain selepas log masuk ke akaun lain 1. Log masuk ke akaun stim anda sendiri, cari penyegerakan awan dalam tetapan, dan matikan penyegerakan awan stim. 2. Log masuk ke akaun Steam orang lain yang anda log masuk sebelum ini, buka Bengkel Kreatif Kertas Dinding, cari kandungan langganan, dan kemudian batalkan semua langganan. (Sekiranya anda tidak dapat mencari kertas dinding pada masa hadapan, anda boleh mengumpulnya dahulu dan kemudian membatalkan langganan) 3. Tukar semula ke wap anda sendiri

Bagaimanakah saya boleh log masuk ke akaun saya sebelum ini di Xiaohongshu? Apakah yang perlu saya lakukan jika nombor asal hilang selepas ia ditukar? Mar 21, 2024 pm 09:41 PM

Dengan perkembangan pesat media sosial, Xiaohongshu telah menjadi platform popular untuk ramai anak muda untuk berkongsi kehidupan mereka dan meneroka produk baharu. Semasa penggunaan, kadangkala pengguna mungkin menghadapi kesukaran untuk log masuk ke akaun sebelumnya. Artikel ini akan membincangkan secara terperinci cara menyelesaikan masalah log masuk ke akaun lama di Xiaohongshu, dan cara menangani kemungkinan kehilangan akaun asal selepas menukar pengikatan. 1. Bagaimana untuk log masuk ke akaun sebelumnya Xiaohongshu? 1. Dapatkan kata laluan dan log masuk. Jika anda tidak log masuk ke Xiaohongshu untuk masa yang lama, akaun anda mungkin dikitar semula oleh sistem. Untuk memulihkan hak akses, anda boleh cuba log masuk ke akaun anda sekali lagi dengan mendapatkan semula kata laluan anda. Langkah-langkah operasi adalah seperti berikut: (1) Buka Aplikasi Xiaohongshu atau laman web rasmi dan klik butang "Log Masuk". (2) Pilih "Retrieve Password". (3) Masukkan nombor telefon bimbit yang anda gunakan semasa mendaftar akaun anda

Kulit koleksi Ibaraki Douji 'Onmyoji' boleh diperolehi sebaik sahaja anda log masuk, dan kulit Zen Heart Cloud Mirror baharu akan dilancarkan tidak lama lagi! Jan 05, 2024 am 10:42 AM

Beribu-ribu hantu menjerit di pergunungan dan padang, dan bunyi penyerahan senjata hilang. Jeneral hantu yang bergegas ke atas pergunungan, dengan semangat juang yang berkobar-kobar di dalam hati mereka, menggunakan api sebagai sangkakala mereka untuk memimpin ratusan hantu untuk menyerang. ke dalam pertempuran. [Blazing Flame Bairen·Kulit Koleksi Doji Ibaraki kini dalam talian] Tanduk hantu berkobar-kobar dengan nyala api, mata yang disepuh dipenuhi dengan semangat juang yang sukar dikawal, dan kepingan perisai jed putih menghiasi baju, menunjukkan momentum yang tidak terkawal dan liar yang hebat. syaitan. Pada lengan baju yang berkibar-kibar seputih salji, nyala api merah melekat dan berjalin, dan corak emas dicetak pada mereka, menyalakan warna merah lembayung dan ajaib. Wasiat-o'-the-wips yang dibentuk oleh kuasa syaitan pekat meraung, dan api yang ganas menggoncang gunung Iblis dan hantu yang telah kembali dari api penyucian, mari kita menghukum penceroboh itu bersama-sama. [Bingkai avatar dinamik eksklusif·Blazing Flame Bailian] [Ilustrasi eksklusif·Firework General Soul] [Penghargaan Biografi] [Cara mendapatkan] Kulit koleksi Ibaraki Doji·Blazing Flame Bailian akan tersedia di kedai kulit selepas penyelenggaraan pada 28 Disember.

Discuz penyelesaian masalah log masuk latar belakang didedahkan Mar 03, 2024 am 08:57 AM

Penyelesaian masalah log masuk latar belakang Discuz didedahkan. ramai webmaster. Walau bagaimanapun, dengan tepat kerana fungsinya yang berkuasa, kadangkala kami menghadapi beberapa masalah semasa menggunakan Discuz, seperti masalah log masuk latar belakang. Hari ini, kami akan mendedahkan penyelesaian kepada masalah log masuk latar belakang Discuz dan memberikan contoh kod khusus, dengan harapan dapat membantu mereka yang memerlukan

Cara log masuk ke versi PC Kuaishou - Cara log masuk ke versi PC Kuaishou Mar 04, 2024 pm 03:30 PM

Baru-baru ini, beberapa rakan telah bertanya kepada saya bagaimana untuk log masuk ke versi komputer Kuaishou Berikut adalah kaedah log masuk untuk versi komputer Kuaishou Rakan yang memerlukannya boleh datang dan mengetahui lebih lanjut. Langkah 1: Mula-mula, cari tapak web rasmi Kuaishou di Baidu dalam penyemak imbas komputer anda. Langkah 2: Pilih item pertama dalam senarai hasil carian. Langkah 3: Selepas memasuki halaman utama laman web rasmi Kuaishou, klik pada pilihan video. Langkah 4: Klik pada avatar pengguna di sudut kanan atas. Langkah 5: Klik kod QR untuk log masuk dalam menu log masuk pop timbul. Langkah 6: Kemudian buka Kuaishou pada telefon anda dan klik pada ikon di sudut kiri atas. Langkah 7: Klik pada logo kod QR. Langkah 8: Selepas mengklik ikon imbasan di penjuru kanan sebelah atas antara muka kod QR Saya, imbas kod QR pada komputer anda. Langkah 9: Akhirnya log masuk ke versi komputer Kuaishou

Bagaimana untuk log masuk ke dua peranti pada Quark Feb 23, 2024 pm 10:55 PM

Bagaimana untuk log masuk ke dua peranti dengan Quark Browser menyokong log masuk ke dua peranti pada masa yang sama, tetapi kebanyakan rakan tidak tahu cara untuk log masuk ke dua peranti dengan Quark Browser Seterusnya, editor membawa pengguna Quark untuk log masuk kepada dua peranti tutorial grafik kaedah, pengguna yang berminat datang dan lihat! Tutorial penggunaan Pelayar Quark Cara log masuk ke dua peranti 1. Mula-mula buka APP Pelayar Quark dan klik [Cakera Rangkaian Quark] pada halaman utama 2. Kemudian masukkan antara muka Cakera Rangkaian Quark dan pilih fungsi perkhidmatan [My Backup]. ; 3. Akhir sekali, pilih [Tukar Peranti] untuk log masuk ke dua peranti baharu.

Bagaimana untuk memasukkan versi web Baidu Netdisk? Pintu masuk log masuk versi web Baidu Netdisk Mar 13, 2024 pm 04:58 PM

Baidu Netdisk bukan sahaja boleh menyimpan pelbagai sumber perisian, tetapi juga berkongsinya dengan orang lain Ia menyokong penyegerakan berbilang terminal Jika komputer anda tidak memuat turun klien, anda boleh memilih untuk memasuki versi web. Jadi bagaimana untuk log masuk ke versi web Baidu Netdisk? Mari kita lihat pengenalan terperinci. Pintu masuk masuk versi web Baidu Netdisk: https://pan.baidu.com (salin pautan ke pelayar untuk dibuka) Pengenalan perisian 1. Perkongsian Menyediakan fungsi perkongsian fail, pengguna boleh menyusun fail dan berkongsi dengan rakan-rakan yang memerlukan. 2. Awan: Ia tidak mengambil terlalu banyak memori Kebanyakan fail disimpan dalam awan, dengan berkesan menjimatkan ruang komputer. 3. Album foto: Menyokong fungsi album foto awan, mengimport foto ke cakera awan, dan kemudian menyusunnya untuk dilihat oleh semua orang. ,

Cara memasang GitHub pada Windows 11/10 Copilot Oct 21, 2023 pm 11:13 PM

GitHubCopilot ialah tahap seterusnya untuk pengekod, dengan model berasaskan AI yang berjaya meramal dan melengkapkan kod anda secara automatik. Walau bagaimanapun, anda mungkin tertanya-tanya bagaimana untuk mendapatkan genius AI ini pada peranti anda supaya pengekodan anda menjadi lebih mudah! Walau bagaimanapun, menggunakan GitHub tidak begitu mudah, dan proses persediaan awal adalah rumit. Oleh itu, kami mencipta tutorial langkah demi langkah ini tentang cara memasang dan melaksanakan GitHub Copilot dalam VSCode pada Windows 11, 10. Cara memasang GitHubCopilot pada Windows Terdapat beberapa langkah untuk proses ini. Jadi, ikuti langkah di bawah sekarang. Langkah 1 – Anda mesti memasang versi terkini Visual Studio pada komputer anda

See all articles