Cookie:使用Cookie实现记住用户的账号和密码

目录:

  1. 练习一:java web(jsp)中使用cookie记住用户的账号和密码
  2. 练习二:java web(jsp+servert)中使用cookie记住用户的账号和密码
    进阶例题:java web中使用cookie记住用户的账号和密码
  3. 练习三:jsp使用cookie实现自动登录(在首次登录之后,将登录信息保存到cookie,再次访问的时候,不将登录信息显示在登录栏中,即登录信息空,但是也可以点击提交,默认从Cookie中获取信息登录,而练习一、练习二是将登录信息显示在登录栏中,然后提交)
  4. 练习四:js实现cookie记住用户的账号和密码(前后端分离实现Cookie,而不是使用jsp)
  5. 练习五:jquery实现cookie记住用户的账号和密码(前后端分离实现Cookie,而不是使用jsp)
  6. 练习六:html+jsp+servlet 使用cookie实现单点登录SSO,模拟腾讯网记住用户信息。
    同域下的单点登录是巧用了Cookie顶域的特性。
    单点登录(SSO)看这一篇就够了
  7. 域名、顶级域名、一级域名、二级域名。
    域名级数是指一个域名由多少级组成,域名的各个级别被“.”分开,最右边的那个词称为顶级域名
    一级域名:又称顶级域名,如.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实现记住用户信息。

  • 36
    点赞
  • 218
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值