与记住用户名代码(javascript)混淆?

时间:2014-03-13 21:03:04

标签: java javascript session-cookies

我开始学习javascript,我对我创建的网页有疑问。该网页是一个登录页面,在登录时显示一些画面报告。我需要创建一个记住我的复选框,就像任何其他网站,如gmail或salesforce。我复制粘贴下面的代码。

    <%@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函数。所以我需要它像一个常见的页面,如记得用户名复选框被选中,用户名应该在页面打开时显示,但对我来说它的作用是,当我打开网页时,我点击“记住用户名” “复选框,用户名文本框中会弹出用户名。现在确定该怎么办?有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

您只有在用户点击remember me按钮时才会检查Cookie。例如,您需要检查文档加载上的cookie。

以这种方式在body标记上添加onload处理程序:<body onload=checkCookie()>。您还需要从记住我按钮中删除onClick="checkCookie()"