目录：
- 练习一：java web（jsp）中使用cookie记住用户的账号和密码
- 练习二：java web（jsp+servert）中使用cookie记住用户的账号和密码
进阶例题：java web中使用cookie记住用户的账号和密码 - 练习三：jsp使用cookie实现自动登录（在首次登录之后，将登录信息保存到cookie，再次访问的时候，不将登录信息显示在登录栏中，即登录信息空，但是也可以点击提交，默认从Cookie中获取信息登录，而练习一、练习二是将登录信息显示在登录栏中，然后提交）
- 练习四：js实现cookie记住用户的账号和密码（前后端分离实现Cookie，而不是使用jsp）
- 练习五：jquery实现cookie记住用户的账号和密码（前后端分离实现Cookie，而不是使用jsp）
- 练习六：html+jsp+servlet 使用cookie实现单点登录SSO，模拟腾讯网记住用户信息。
同域下的单点登录是巧用了Cookie顶域的特性。
单点登录（SSO）看这一篇就够了 - 域名、顶级域名、一级域名、二级域名。
域名级数是指一个域名由多少级组成，域名的各个级别被“.”分开，最右边的那个词称为顶级域名
一级域名：又称顶级域名，如.com、.net、.top、.org
二级域名：就是在一级域名前再加一级，如qq.com，二级域名以上级别的域名，统称为子域名，不在“注册域名”的范畴中。个人可以申请注册二级域名。
三级域名：如im.qq.com（qq）、qzone.qq.com（qq空间）、lol.qq.com（lol）、mail.qq.com（qq邮箱）....
练习一
首先是登录的页面，当用户首次输入账号和密码登录后，后台设置cookie的值，然后下次登录的时候就不用再次输入账号和密码了。
1.hello.jsp代码:登录页面，如果cookie中有值，则获取Cookie中的值填充到账号、密码所在的输入框。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<%
String firstname="";
String password="";
Cookie[] c1=request.getCookies();
if(c1!=null){
for(Cookie c:c1){
String cookiename=c.getName();
if("first".equals(cookiename)){
String val=c.getValue();
firstname=val;
}
if("pass".equals(cookiename)){
String val=c.getValue();
password=val;
}
}
}
%>
<form action="index.jsp">
firstname:<input type="text" name="firstname" value="<%=firstname%>" placeholder="请输入账号"></input></br>
password:<input type="password" name="password" value="<%=password%>" placeholder="请输入密码"></input></br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>2.index.jsp代码：点击登录后的跳转页面，将账号、密码保存到Cookie中。
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World!<br/>
<%
String firstname=request.getParameter("firstname");
String password=request.getParameter("password");
if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
Cookie c1=new Cookie("first",firstname);
Cookie c2=new Cookie("pass",password);
c1.setMaxAge(60*60*24);
c2.setMaxAge(60*60*24);
c1.setPath("/");
c2.setPath("/");
response.addCookie(c1);
response.addCookie(c2);
out.println(firstname+"-"+password);
}else{
response.sendRedirect("hello.jsp");
}
%>
</body>
</html>3.第一次访问hello.jsp页面，里面是没有值的
4.输入值并点击提交
5.登录之后，现在cookie已经写入浏览器中。可以使用调试工具F12可以看到Cookie中保存的值。
6.重新启动浏览器，再次访问hello.jsp页面，可以看到已经不用再次输入账号和密码了。
练习二
原理和练习一相同，只是将Cookie实现部分放在在servlert中
1.hello.jsp相同
2.index.jsp如下
3.HelloCookie.java代码
package test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloCookie extends HttpServlet{
public void service(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
String firstname=request.getParameter("firstname");
String password=request.getParameter("password");
if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
Cookie c1=new Cookie("first",firstname);
Cookie c2=new Cookie("pass",password);
c1.setMaxAge(60*60*24);
c2.setMaxAge(60*60*24);
c1.setPath("/");
c2.setPath("/");
response.addCookie(c1);
response.addCookie(c2);
System.out.println(firstname+"-"+password);
//只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
request.getRequestDispatcher("index.jsp").forward(request, response);
}else{
response.sendRedirect("hello.jsp");
}
}
}4.web.xml中添加如下代码
<servlet>
<servlet-name>servlet1</servlet-name>
<servlet-class>test.HelloCookie</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servlet1</servlet-name>
<url-pattern>/aaa</url-pattern>
</servlet-mapping>5.运行效果：
6.输入账号密码登录后：
7.退出后重新登录：
练习三
和练习一结构目录相同，但是代码有所改变
hello.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<form action="index.jsp">
firstname:<input type="text" name="firstname" placeholder="请输入账号"></input></br>
password:<input type="password" name="password" placeholder="请输入密码"></input></br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>index.jsp
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World!<br/>
<%
//第一步：获取登录信息
String firstname=request.getParameter("firstname");
String password=request.getParameter("password");
//第二步：如果登录信息不为空，则将登录信息保存在cookie中
if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
Cookie c1=new Cookie("first",firstname);
Cookie c2=new Cookie("pass",password);
c1.setMaxAge(60*60*24);
c2.setMaxAge(60*60*24);
c1.setPath("/");
c2.setPath("/");
response.addCookie(c1);
response.addCookie(c2);
}else{//第三步：如果登录信息为空，则从cookie中获取上一次的登录信息
Cookie[] c1=request.getCookies();
for(Cookie c:c1){
String cookiename=c.getName();
if("first".equals(cookiename)){
String val=c.getValue();
firstname=val;
}
if("pass".equals(cookiename)){
String val=c.getValue();
password=val;
}
}
}
//第四步：如果登录信息不为空，则跳转到hello.jsp,如果登录信息为空，则返回登录页面
if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
out.println(firstname+"-"+password);
}else{
response.sendRedirect("hello.jsp");
}
%>
</body>
</html>运行效果：在首次登录之后，再次访问hello.jsp页面，即使登录信息为空，也可使用上一次的登录信息登录成功。
练习四
当首次输入并选择记住密码后，重启浏览器再次访问后，在输入栏会自动显示上次登录的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/**用户登录，其中需要判断是否选择记住密码**/
function checkCookie(){
//简单验证一下
var userName = document.getElementById("firstname").value;
if(userName == ''){
alert("请输入用户名。");
return;
}
var userPass = document.getElementById("password").value;
if(userPass == ''){
alert("请输入密码。");
return;
}
var objChk = document.getElementById("chkRememberPass");
if(objChk.checked){
//添加cookie
setCookie("first",userName,7);
setCookie("pass",userPass,7);
alert("记住了你的密码登录。");
}else{
alert("不记密码登录。");
}
}
/**添加设置cookie**/
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 + ";path=/";
}
/**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/
window.onload = function(){
var userNameValue = getCookieValue("first");
var userPassValue = getCookieValue("pass");
//可在console中看到输出的userNameValue+"-"+userPassValue
console.log(userNameValue+"-"+userPassValue);
document.getElementById("firstname").value = userNameValue;
document.getElementById("password").value = userPassValue;
}
/**获取每个输入的值**/
function getCookieValue(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</Script>
</head>
<body">
<form method="post">
用户名:<input type="text" id="firstname" name="firstname" " placeholder="请输入账号"></input></br>
密码:<input type="password" id="password" name="password" placeholder="请输入密码"></input></br>
<span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span>
<input type="checkbox" id="chkRememberPass" name="chkRememberPass" /></br>
<input type="submit" value="提交" onclick="checkCookie()"></input>
<input type="reset" name="reset" value="重置"/>
</form>
</body>
</html>js cookie详解：JavaScript Cookies
练习五
项目目录结构
HelloCookie.java
package test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloCookie extends HttpServlet{
public void service(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
String firstname=request.getParameter("firstname");
String password=request.getParameter("password");
if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
Cookie c1=new Cookie("first",firstname);
Cookie c2=new Cookie("pass",password);
c1.setMaxAge(60*60*24);
c2.setMaxAge(60*60*24);
c1.setPath("/");
c2.setPath("/");
response.addCookie(c1);
response.addCookie(c2);
System.out.println(firstname+"-"+password);
//只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
request.getRequestDispatcher("index.jsp").forward(request, response);
}else{
response.sendRedirect("hello.jsp");
}
}
}web.xml
<servlet>
<servlet-name>servlet1</servlet-name>
<servlet-class>test.HelloCookie</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servlet1</servlet-name>
<url-pattern>/aaa</url-pattern>
</servlet-mapping>login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 引入jquery和cookie -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
var firstname=$.cookie("first");
var password=$.cookie("pass");
$("#firstname").val(firstname);
$("#password").val(password);
});
</script>
<form action="aaa">
firstname:<input type="text" id="firstname" name="firstname" " placeholder="请输入账号"></input></br>
password:<input type="password" id="password" name="password" placeholder="请输入密码"></input></br>
<input type="submit" value="提交"></input>
</form>
</body>
</html>index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>成功啦</p>
</body>
</html>运行效果：
当输入登录信息并提交后，再次访问login.html时，输入信息栏会自动出现登录信息。
练习六
比如腾讯产品家族：腾讯网（qq.com）是二级域名，qq音乐（y.qq.com）、qq空间（qzone.qq.com）、qq邮箱（mail.qq.com）、电脑管家（guanjia.qq.com）、英雄联盟（lol.qq.com）等都是三级域名
项目结构目录
1.HelloCookie.java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloCookie extends HttpServlet{
public void service(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
String username=request.getParameter("username");
String password=request.getParameter("password");
if(username!=null&&password!=null&&username!=""&&password!=""){
Cookie c1=new Cookie("user",username);
Cookie c2=new Cookie("pass",password);
c1.setMaxAge(60*60*24);
c2.setMaxAge(60*60*24);
c1.setPath("/");
c2.setPath("/");
response.addCookie(c1);
response.addCookie(c2);
System.out.println(username+"-"+password);
System.out.println(request.getServletPath());
System.out.println(request.getContextPath());
System.out.println(request.getRequestURI());
String path=request.getServletPath();
if(path=="/qq") {
System.out.println("准备进入腾讯网主页");
request.setAttribute("name", "这是腾讯网主页");
//只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
request.getRequestDispatcher("success.jsp").forward(request, response);
}
if(path=="/lol") {
System.out.println("准备进入lol主页");
request.setAttribute("name", "这是lol主页");
//只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
request.getRequestDispatcher("success.jsp").forward(request, response);
}
if(path=="/email") {
System.out.println("准备进入qq邮箱主页");
request.setAttribute("name", "这是email主页");
//只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
request.getRequestDispatcher("success.jsp").forward(request, response);
}
}else {
response.sendRedirect("index.html");
}
}
}
2.LogoutServlet.java
package test;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class LogoutServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 遍历浏览器发送到服务器端的所有Cookie，找到自己设置的Cookie
Cookie[] cookies=request.getCookies();
if(cookies==null) {
response.sendRedirect("index.html");
}else {
for(Cookie c:cookies) {
// 设置Cookie立即失效
c.setMaxAge(0);
/**
* 删除Cookie时，只设置maxAge=0将不能够从浏览器中删除cookie,
* 因为一个Cookie应当属于一个path，所以删除时，Cookie的这个属性也必须设置。
*/
c.setPath("/");
response.addCookie(c);
}
}
response.sendRedirect("logOut.jsp");
}
}3.web.xml添加如下
<!-- qq -->
<servlet>
<servlet-name>servlet1</servlet-name>
<servlet-class>test.HelloCookie</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servlet1</servlet-name>
<url-pattern>/qq</url-pattern>
</servlet-mapping>
<!-- lol -->
<servlet>
<servlet-name>servlet2</servlet-name>
<servlet-class>test.HelloCookie</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servlet2</servlet-name>
<url-pattern>/lol</url-pattern>
</servlet-mapping>
<!-- email -->
<servlet>
<servlet-name>servlet3</servlet-name>
<servlet-class>test.HelloCookie</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servlet3</servlet-name>
<url-pattern>/email</url-pattern>
</servlet-mapping>
<!-- loginOut -->
<servlet>
<servlet-name>servlet4</servlet-name>
<servlet-class>test.LogoutServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>servlet4</servlet-name>
<url-pattern>/loginOut</url-pattern>
</servlet-mapping>4.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>这是腾讯网</p>
<a href="loginQQ.html">登录</a></br>
<a href="loginLOL.html">英雄联盟</a></br>
<a href="loginEmail.html">qq邮箱</a></br>
<p>......</p>
<a href="loginOut">退出</a></br>
</body>
</html>5.loginQQ.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录QQ</title>
</head>
<body>
<!-- 引入jquery和cookie -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
var username=$.cookie("user");
var password=$.cookie("pass");
$("#username").val(username);
$("#password").val(password);
});
</script>
<h3>QQ登录</h3>
<form action="qq" method="post">
<label>用户名：</label><input type="text" id="username" name="username"><br/>
<label>密 码：</label><input type="password" id="password" name="password"><br/>
<input type="submit" value="登录">
</form>
</body>
</html>6.loginLOL.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录英雄联盟</title>
</head>
<body>
<!-- 引入jquery和cookie -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
var username=$.cookie("user");
var password=$.cookie("pass");
$("#username").val(username);
$("#password").val(password);
});
</script>
<h3>英雄联盟登录</h3>
<form action="lol" method="post">
<label>用户名：</label><input type="text" id="username" name="username"><br/>
<label>密 码：</label><input type="password" id="password" name="password"><br/>
<input type="submit" value="登录">
</form>
</body>
</html>7.loginEmail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录QQ邮箱</title>
</head>
<body>
<!-- 引入jquery和cookie -->
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
var username=$.cookie("user");
var password=$.cookie("pass");
$("#username").val(username);
$("#password").val(password);
});
</script>
<h3>QQ邮箱登录</h3>
<form action="email" method="post">
<label>用户名：</label><input type="text" id="username" name="username"><br/>
<label>密 码：</label><input type="password" id="password" name="password"><br/>
<input type="submit" value="登录">
</form>
</body>
</html>8.success.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<SCRIPT type="text/javascript">
alert("登录成功！！！");
</SCRIPT>
<%
out.println(request.getAttribute("name"));
%>
</body>
</html>9.logOut.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>
<SCRIPT type="text/javascript">
alert("退出成功！！！");
</SCRIPT>
<%
Cookie[] cookies=request.getCookies();
if(cookies!=null){
for(Cookie c:cookies){
String name=c.getName();
String value=c.getValue();
out.println(name+"---"+value+";");
}
}
%>
<p>这是退出之后的页面</p>
</body>
</html>运行效果：访问http://localhost:8080/testCookie/index.html
因为qq、lol、qq邮箱同属于腾讯产品，所以此项目实现3者只要登录一个，其他两者就可以自动获取账号和密码，实现自动登录功能，并且在点击退出按钮后，可以退出账号，下次登录时，需要重新输入账号和密码。模拟www.qq.com实现记住用户信息。
979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
