基于localStorge開發登錄模塊的記住密碼與自動登錄實例

來源：懂視網責編：小采時間：2020-11-27 22:35:23

基于localStorge開發登錄模塊的記住密碼與自動登錄實例

基于localStorge開發登錄模塊的記住密碼與自動登錄實例:關于這個模塊功能模塊的由來，這是鳥大大的處女秀，為什么這么說呢？一天在群里，一個哥們說有私活，開發一個****模塊，我那天手癢癢就和他聊了兩句，然后，就決定給她做這個模塊了，和他談了談交付時間，他說最遲兩天，然后談了談加個，最后達成，500￥。

推薦度：

點擊下載本文 文檔為doc格式

導讀基于localStorge開發登錄模塊的記住密碼與自動登錄實例:關于這個模塊功能模塊的由來，這是鳥大大的處女秀，為什么這么說呢？一天在群里，一個哥們說有私活，開發一個****模塊，我那天手癢癢就和他聊了兩句，然后，就決定給她做這個模塊了，和他談了談交付時間，他說最遲兩天，然后談了談加個，最后達成，500￥。

關于這個模塊功能模塊的由來，這是鳥大大的處女秀，為什么這么說呢？一天在群里，一個哥們說有私活，開發一個****模塊，我那天手癢癢就和他聊了兩句，然后，就決定給她做這個模塊了，和他談了談交付時間，他說最遲兩天，然后談了談加個，最后達成，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('正在自動登錄'); 
 $("#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>
 <div id="box"></div>
 <div class="cent-box">
 <div class="cent-box-header">
 <h1 class="main-title hide">仿知乎</h1>
 <h2 class="sub-title">生活熱愛分享 - Thousands Find</h2>
 </div>

 <div class="cont-main clearfix">
 <div class="index-tab">
 <div class="index-slide-nav">
 <a href="login.html" rel="external nofollow" class="active">登錄</a>
 <a href="register.html" rel="external nofollow" >注冊</a>
 <div class="slide-bar"></div>
 </div>
 </div>
 <form id="loginform" name="loginform" autocomplete="on" method="post">
 <div class="login form">
 <div class="group">
 <div class="group-ipt email">
 <input type="email" name="email" id="email" class="ipt" placeholder="郵箱地址" required/>
 </div>
 <div class="group-ipt password">
 <input type="password" name="password" id="password" class="ipt" placeholder="輸入您的登錄密碼" required/>
 </div>

 </div>
 </div>

 <div class="button">
 <button type="button" class="login-btn register-btn" id="button" onclick="login()">登錄</button>
 </div>

 <div 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>

 </div>
 </form>
 </div>
 </div>

 <div class="footer">
 <p>仿知乎 - Thousands Find</p>
 <p>copy@*.* 2016</p>
 </div>

 <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.勾選了記住密碼，就將用戶名密碼保存到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";
 }

記住，這時你已經勾選了記住密碼，下次登錄時，該如何操作？

在$(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;
 }
 }
 });

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

當用戶再次登錄的時候，還是在一加載的時候，做出判斷，是否勾選自動登錄，勾選的話，從storage里拿到數據，直接發生異步

請求，就不用用戶做出點擊登錄事件了！

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("系統錯誤");
 }
 });

以上這篇基于localStorge開發登錄模塊的記住密碼與自動登錄實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于localStorge開發登錄模塊的記住密碼與自動登錄實例

推薦度：

點擊下載本文 文檔為doc格式

標簽：登錄的基于 localstorage

熱門焦點

基于localStorge開發登錄模塊的記住密碼與自動登錄實例

基于localStorge開發登錄模塊的記住密碼與自動登錄實例

基于localStorge開發登錄模塊的記住密碼與自動登錄實例

最新推薦

猜你喜歡

熱門推薦