我开始学习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"> </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函数。所以我需要它像一个常见的页面,如记得用户名复选框被选中,用户名应该在页面打开时显示,但对我来说它的作用是,当我打开网页时,我点击“记住用户名” “复选框,用户名文本框中会弹出用户名。现在确定该怎么办?有人可以帮助我吗?
答案 0 :(得分:0)
您只有在用户点击remember me
按钮时才会检查Cookie。例如,您需要检查文档加载上的cookie。
以这种方式在body标记上添加onload
处理程序:<body onload=checkCookie()>
。您还需要从记住我按钮中删除onClick="checkCookie()"
。