
正文
cookie实现记住登录名和密码
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在最近学习的session作用域中,顺便了解了一下cookie,
session是存放在服务器中,而cookie是存放在客户端中。
本篇文章主要是使用cookie来实现记住密码的功能。
简单的login.jsp页面的代码:
在这里解释一下第二行的s标签,我是使用struts2框架做的。就简单的servelet和jsp可以实现同样的功能,
既然可以记住密码,相应的就是密码安全问题。在这里顺便说一下MD5加密。值需要一个md5.js就可以
login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'login.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="css/style_public.css" />
<link rel="stylesheet" href="css/style_login.css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script src="js/md5.js" ></script>
</head> <body>
ta<!--头部-->
<header>
<div class="btn"><a href="login.html">登陆</a>/<a href="registered.html">注册</a></div>
</header>
<!--中间内容(主题内容)-->
<div class="main">
<div class="box">
<p><a href="index.html">返回首页</a></p>
<form id="forml" action="user_valid.action" method="post">
<s:token></s:token>
<div class="content">
<p>QQ号</p>
<input type="text" placeholder="请输入QQ号" id="input1" name="um.userid" />
<p>密码</p>
<input type="password" placeholder="请输入密码" id="input2" name="um.userpwd" onblur="getmd5()"/>
<div style="margin-top: 20px;color:red;" ><input id="remebers" type="checkbox" name="remenber" value="1"/>
<span >记住用户名和密码</span></div>
<div class="btnss" onclick="sub()">登录</div>
</div>
</form>
<span id="sp1"></span>
<span id="sp2"></span>
</div> </div>
<!--尾部-->
<footer>
<p style="margin-top: 0px;">网站链接:你猜网 www.xxxxxxxxx.com</p>
</footer>
<script>
$(document).ready(function () {
$("#input1").focus();
//记住用户名和密码
$('#remebers').click(function () {
if ($("#input1").val() == "") {
alert("用户名不能为空!");
}
if($("#input2").val() == "")
{
alert("密码不能为空!");
} else {
if ($('#remebers').attr("checked")) {
setCookie("userid", $("#input1").val(), 60);
setCookie("upwd", $("#input2").val(), 60);
}else {
delCookie("userid");
delCookie("upwd");
}
}
});
if (getCookie("userid") != null)
{
$('#remebers').attr("checked", "checked");
$('#input1').val(getCookie("userid"));
$('#input2').val(getCookie("upwd"));
}
})
//写cookies
function setCookie(name, value) {
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
//删除cookies
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
} function sub(){
document.getElementById("forml").submit();
} window.onload=function(){
var input1=document.getElementById("input1");
var input2=document.getElementById("input2");
var sp1=document.getElementById("sp1");
var sp2=document.getElementById("sp2");
//失去焦点时判断 QQ号
input1.onblur=function(){
if(sp1.innerText==""||sp1.innerText==null||sp1.innerText==undefined){
sp1.innerText="请输入您的QQ号";
}
}
//失去焦点时判断密码
input2.onblur=function(){
if(sp2.innerText==""||sp2.innerText==null||sp2.innerText==undefined){
sp2.innerText="请输入您的密码";
}
}
}
//将密码生成md5,密码输完失去焦点时调用
function getmd5(){
var a= hex_md5($("#input2").val())
$("#input2").val(a);
}
</script>
</body>
</html>
页面布局差不多了,那就是后台,分别获得input中的三个值,登录id和密码还有是否记住密码的选框
package com.direct.action; import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList; import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.direct.dao.LoginDao;
import com.direct.model.UserModel;
import com.direct.util.Dutil;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport; public class Login extends ActionSupport{ private UserModel um;
private int remenber; public String valid(){
LoginDao dao = new LoginDao();
ArrayList<UserModel> listum = dao.vali(um.getUserid(), um.getUserpwd());
if (listum.size()>0) {
ActionContext.getContext().getSession().put("um", listum.get(0));// 一次请求对象存入作用域
//处理Cookie: name:userInfo
Cookie c=new Cookie("userid", um.getUserid()+"");
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
c.setPath(request.getContextPath());
if(remenber==0){
//Cookie 时间
c.setMaxAge(0);
}else{
//记住Cookie
c.setMaxAge(60*60);//保存时间 一分钟
}
response.addCookie(c);//将Cookie相应到客户端 }else {
return "loginhtml";
} return "login";
}
public UserModel getUm() {
return um;
}
public void setUm(UserModel um) {
this.um = um;
}
public int getRemenber() {
return remenber;
}
public void setRemenber(int remenber) {
this.remenber = remenber;
} }
再说一遍,我使用的struts2框架,后台的实现和servlet有点区别,但大致相同。先获取到值,连接数据库判断是否登录成功。
这里的um是一个实体对象,就是用户基本信息的对象。在这里我就没有写。
还有就是验证用户名和密码数据库是否存在的dao方法,我也没有贴出。简单的望大家自行解决,不会的留言讨论。
再判断用户是否使用了记住密码,记住了密码则生产cookie对象,存放数据。否则清空cookie存放的数据。
记住密码后在客户端是可以看到信息的。








