前言引入
客户端(浏览器)的登录界面通过表单等操作发送一次HTTP请求给服务器,服务器会将前端传递的数据去数据库中查询用户数据。当第二次登录时如何不需要手动输入用户信息,而是已经自动将值存入,从而进行登陆呢?
记住密码操作的原理
当我们进入到登录界面时,可以创建一个JavaScript脚本引入到当前登录页面中,每次进入登陆界面时会执行脚本,而在我们的脚本中完成获取Cookie存储的值,从而通过前端相关知识将值赋值给对应的输入框即可。若没有用户登录,且是点击了记住密码操作的按钮提交给服务器的数据,那么服务器会将该数据通过构建Cookie对象将数据保存,便于前端页面中的预加载事件可以及时的完成赋值操作
前端页面
<html>
<head>
<title>login</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--引入记住密码的js脚本-->
<script src="css/rem.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div id="top_content">
<div id="header">
<div id="rightheader">
<p>
<!--显示日期-->
<span id="time">123</span>
<br />
</p>
</div>
<div id="topheader">
<h1 id="title">
<a href="#">Main</a>
</h1>
</div>
<div id="navigation">
</div>
</div>
<div id="content">
<p id="whereami">
</p>
<h1>
login
</h1>
<form action="login" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<!--用户名输入框-->
<tr>
<td valign="middle" align="right">
username:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="username" id="username"/>
</td>
</tr>
<!--密码输入框-->
<tr>
<td valign="middle" align="right">
password:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="pwd" id="password"/>
</td>
</tr>
<!--记住密码的checkbox-->
<tr>
<td valign="middle" align="right">
记住密码:
</td>
<td valign="middle" align="left">
<input type="checkbox" class="inputgri" name="remb" id="remb" value="1"/>
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="Submit »" />
</p>
</form>
</div>
</div>
<div id="footer">
<div id="footer_bg">
rxx17362415996@sina.com
</div>
</div>
</div>
</body>
</html>
JavaScript脚本代码
//通过js获取cookie k1=v1;k2=v2;k3=v3....
var cookies = window.document.cookie.split(";");
//封装一个函数:根据指定的key得到value值
function findCookie(KName) {
//迭代cookies
for (var i = 0; i < cookies.length;i++){
//二次分割,得到键值对 k,v
var kv = cookies[i].split("=");
//判定 删掉空格 replace(" ","") 或trim()
if (KName==kv[0].trim()){
return kv[1].trim();
}
}
return '';
}
//设定时间的函数
function getTime(){
//创建日期对象
var myDate=new Date();
var year = myDate.getFullYear();//从 Date 对象以四位数字返回年份。
var month = myDate.getMonth() + 1;//从 Date 对象返回月份 (0 ~ 11)
var day = myDate.getDate();//从 Date 对象返回一个月中的某一天 (1 ~ 31)
return year + "/" + month + "/" + day;
}
//加载自动调用
window.onload = function () {
//设定日期
//获取显示日期的span标签并设定内容
document.getElementById("time").innerHTML = getTime();
//根据用户名、密码、复选框的cookie k值进行循环查找value值
var username = findCookie("username");//用户名
var password = findCookie("password");//密码
var remb = findCookie("remb");//记住密码复选框
//需要判断用户是否点击了记住密码的多选框
if ("1" == remb){
//给输入框赋值 解码
document.getElementById("username").value = decodeURI(username,"utf-8");
document.getElementById("password").value = decodeURI(username,"utf-8");
document.getElementById("remb").checked = "checked";
}
};
界面中的用户名、密码、记住密码三个的值通过name属性结合form表单将数据提交到 login 请求,其中的记住密码复选框很重要,是后台服务器是否存储用户数据的条件
后台代码
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
public void service(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException{
//1、设置请求参数的编码
request.setCharacterEncoding("utf-8");
//2、设置响应的数据类型与编码格式
response.setContentType("text/html;charset=utf-8");
//3、获取请求参数值(页面里面的name属性值)
String username = request.getParameter("username");
String password = request.getParameter("pwd");
//获取是否勾选保存密码复选框操作
String remb = request.getParameter("remb");//登录页面中传递的value值为1
//判断用户是否点击的记住密码复选框
if ("1".equals(remb)){
//封装:记住密码操作
rem_pwd(response,username,password,remb);
//通过响应对象获取字符输出流向网页中写入内容
response.getWriter().println("记住密码操作......");
}
}
//封装:记住密码操作
private void rem_pwd(HttpServletResponse response, String username, String password,String remb) throws UnsupportedEncodingException {
Cookie userNameCookie = new Cookie("username", URLEncoder.encode(username,"utf-8"));
Cookie passwordCookie = new Cookie("password",URLEncoder.encode(password,"utf-8"));
Cookie rembCookie = new Cookie("remb",remb);
//设置Cookie存活时间
userNameCookie.setMaxAge(10*60);
passwordCookie.setMaxAge(10*60);
rembCookie.setMaxAge(10*60);
//添加Cookie
response.addCookie(userNameCookie);
response.addCookie(passwordCookie);
response.addCookie(rembCookie);
}
}
运行过程
当进入login.html登录界面时会执行前端中的JavaScript脚本,而脚本中主要完成的操作是通过传入指定Cookie的key值获取对应的value属性值,从而通过id属性赋值给指定的输入框,达到记住用户名、密码操作
感谢大家的阅读,热爱分享的仓鼠,请大家多多指教,么么哒~~~~~