與記住用戶名密碼混淆（javascript）？

我開始學習JavaScript，我對我創建的網頁有疑問。該網頁是一個登錄頁面，它在登錄時顯示一些畫面報告。我需要創建一個記住我的複選框，就像任何其他網站，如Gmail或salesforce。我有複製粘貼下面的代碼。與記住用戶名密碼混淆（javascript）？

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
    <% 
    ServletContext context = getServletContext(); 
    String app = context.getInitParameter("appName"); 
    String errorMessage = ""; 
    if (session.getAttribute("error-message")!=null){ 
     errorMessage = (String) session.getAttribute("error-message"); 
    } 
    %> 
    <!DOCTYPE html> 

      <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

        <title><%=app%> - Please login</title> 

        <link href="styles/bootstrap-theme.min.css" rel="stylesheet"> 

        <link href="styles/bootstrap.min.css" rel="stylesheet"> 
        <link href="styles/sidebars.css" rel="stylesheet"> 
        <link rel="shortcut icon" href="img/favicon.ico"> 
        <style type='text/css' media='screen'> 
          body { 
           font-family: Tahoma; 
           font-size: 12px !important; 
           padding-top: 40px; 
           padding-bottom: 40px; 
           background-color: #fff; 
          } 
          .form-signin .form-signin-heading, 
          .form-signin .checkbox { 
           margin-bottom: 10px; 
          } 

          .navbar{ 
           border-color: #ccc; 
          } 
          .alert-warning{ 
           margin-top: 15px; 
          } 
          .validation-summary-errors{ 
           font-family: Tahoma !important; 
           font-size: 12px !important; 
           color: #b94a48; 
           margin-top: 35px; 
           margin-bottom: -15px; 
          } 
          .col-md-8{ 
           padding-left: 5px; 
          } 
    /*      .navbar-inverse{ 
           border-color: #ccc; 
           background: #ddf0f8; Old browsers 
           background: -moz-linear-gradient(top, #ddf0f8 0%, #ffffff 63%); FF3.6+ 
           background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddf0f8), color-stop(63%,#ffffff)); Chrome,Safari4+ 
           background: -webkit-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Chrome10+,Safari5.1+ 
           background: -o-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); Opera 11.10+ 
           background: -ms-linear-gradient(top, #ddf0f8 0%,#ffffff 63%); IE10+ 
           background: linear-gradient(to bottom, #ddf0f8 0%,#ffffff 63%); W3C 
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ddf0f8', endColorstr='#ffffff',GradientType=0); IE6-9 
          }*/ 
        </style> 

     </head> 

      <body> 
      <div class="navbar navbar-fixed-top" role="navigation"> 

      <div class="navbar-header"> 
       <img class="logo" src="img/Nexius_logo.png"/> 

      </div> 


     </div> 



          <div class='inner col-md-8'> 

            <%=errorMessage%> 
            <form action='LoginServlet' method='POST' id='loginForm' class='form-horizontal' role='form' autocomplete='off'> 
              <h4 class="form-signin-heading">&nbsp;</h4> 

              <div class="form-group"> 
                <label for='username' class='col-md-2 control-label'>User name</label> 
                <div class="col-md-4"> 
                 <input type='text' class="form-control" name='user' id='username' /> 
                </div> 
              </div> 

              <div class="form-group"> 
                <label for='password' class='col-md-2 control-label'>Password</label> 
                <div class="col-md-4"> 
                 <input type='password' class="form-control" name='pwd' id='password' /> 
                </div> 
              </div> 

              <div class="form-group"> 
               <div class="col-md-offset-2 col-md-10"> 
                <button class="btn btn-default" type="submit">Login</button> 
               </div> 
              </div> 
              <div class="form-group"> 
               <div class="col-md-offset-2 col-md-10"><div style="position: absolute; top: -45px; left: 100px; width: 240px;"> 


                 <input onClick="checkCookie()" type="checkbox" value="Remember me">Remember username<br> 


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


      <script type='text/javascript'> 

      function setCookie(cname,cvalue,exdays) 
    { 
    var d = new Date(); 
    d.setTime(d.getTime()+(exdays*24*60*60*1000)); 
    var expires = "expires="+d.toGMTString(); 
    document.cookie = cname+"="+cvalue+"; "+expires; 
    } 

    function getCookie(cname) 
    { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) 
     { 
     var c = ca[i].trim(); 
     if (c.indexOf(name)===0) return c.substring(name.length,c.length); 
     } 
    return ""; 
    } 

    function checkCookie() 
    { 
    var user=getCookie("user"); 

    if (user!=="") 
     { 
     document.getElementById("username").value = user; 
     } 
    else 
     { 

     if (user!=="" && user!=null) 
     { 
     setCookie("user",user,30); 
     } 
     } 
    } 


      </script> 





      </body> 
    </html>

大部分上半部分只是CSS。在下面的部分中，我寫了代碼來獲取文本框上的用戶名並將其傳遞給下面的setcookie函數。所以我需要它像通常的頁面一樣，當記住用戶名複選框被選中時，用戶名應該顯示在頁面打開時，但對我來說它是什麼，當我打開網頁時，只有當我點擊「記住用戶名「複選框用戶名文本框中彈出用戶名。現在確定該怎麼做？有人可以幫幫我嗎？

來源

2014-03-13 user3417346

您只在用戶點擊remember me按鈕時檢查cookie。例如，您需要在文檔加載時檢查cookie。如下：<body onload=checkCookie()>。您還需要從記住我的按鈕中刪除onClick="checkCookie()"。

來源

2014-03-13 21:10:01

嗨非常感謝你，它工作正常，但即使我沒有點擊記住我的複選框瀏覽器似乎記得我的用戶名，好像我的功能（）和複選框沒有連接atll，是那有一個解決方案？ – user3417346

也在下面我寫了代碼來獲取用戶名，我的經理讓我也記住密碼，因此我複製了相同的代碼，只更改方法名稱並將用戶名文本框替換爲此部分中的密碼文本框， if（user！==「」） { document.getElementById（「password」）。value = user; } 我在中添加了這個函數，第二個函數是用於密碼的。這會工作嗎？難道我做錯了什麼？或者做到這一點的最佳方法是什麼？謝謝你的幫助！ – user3417346

與記住用戶名密碼混淆（javascript）？

回答

相關問題