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

- 日理万妓 2023-08-17 16:29 187阅读 0赞

目录：

  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，模拟https://www.qq.com/记住用户信息。
    同域下的单点登录是巧用了Cookie顶域的特性。
    单点登录（SSO）看这一篇就够了
  7. 域名、顶级域名、一级域名、二级域名。
    一级域名：又称顶级域名，如.com、.net、.top、.org
    二级域名：www.qq.com
    三级域名：.im.qq.com（qq）、.qzone.qq.com（qq空间）、.lol.qq.com（lol）、.mail.qq.com（qq邮箱）….
    简而言之，有多少个点就是几级域名。

#

练习一

首先是登录的页面，当用户首次输入账号和密码登录后，后台设置cookie的值，然后下次登录的时候就不用再次输入账号和密码了。

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70

1.hello.jsp代码:登录页面，如果cookie中有值，则获取Cookie中的值填充到账号、密码所在的输入框。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 1

  1. <%@ page language="java" contentType="text/html;  charset=utf-8"  pageEncoding="utf-8" %>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Insert title here</title>
  5. </head>
  6. <body>
  7.     <%
  8.         String firstname="";
  9.         String password="";
  10.         Cookie[] c1=request.getCookies();
  11.         if(c1!=null){
  12.             for(Cookie c:c1){
  13.                 String cookiename=c.getName();
  14.                 if("first".equals(cookiename)){
  15.                     String val=c.getValue();
  16.                     firstname=val;
  17.                 }
  18.                 if("pass".equals(cookiename)){
  19.                     String val=c.getValue();
  20.                     password=val;
  21.                 }
  22.             }
  23.         }
  24.     %>
  25.     <form action="index.jsp">
  26.         firstname:<input type="text" name="firstname" value="<%=firstname%>" placeholder="请输入账号"></input></br>
  27.         password:<input type="password" name="password" value="<%=password%>" placeholder="请输入密码"></input></br>
  28.         <input type="submit" value="提交"></input>
  29.     </form>
  30. </body>
  31. </html>

2.index.jsp代码：点击登录后的跳转页面，将账号、密码保存到Cookie中。

  1. <html>
  2. <head>
  3. <title>Hello World</title>
  4. </head>
  5. <body>
  6. Hello World!<br/>
  7. <% 
  8.     String firstname=request.getParameter("firstname");
  9.     String password=request.getParameter("password");
  10.     if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
  11.         Cookie c1=new Cookie("first",firstname);
  12.         Cookie c2=new Cookie("pass",password);
  13.         c1.setMaxAge(60*60*24);
  14.         c2.setMaxAge(60*60*24);
  15.         c1.setPath("/");
  16.         c2.setPath("/");
  17.         response.addCookie(c1);
  18.         response.addCookie(c2);
  20.         out.println(firstname+"-"+password);
  21.     }else{
  22.         response.sendRedirect("hello.jsp");
  23.     }
  24. %>
  25. </body>
  26. </html>

3.第一次访问hello.jsp页面，里面是没有值的

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 2

4.输入值并点击提交

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 3

5.登录之后，现在cookie已经写入浏览器中。可以使用调试工具F12可以看到Cookie中保存的值。
watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 4

6.重新启动浏览器，再次访问hello.jsp页面，可以看到已经不用再次输入账号和密码了。
20190928211405355.png

练习二

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 5

原理和练习一相同，只是将Cookie实现部分放在在servlert中

1.hello.jsp相同

2.index.jsp如下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 6

3.HelloCookie.java代码

  1. package test;
  3. import java.io.IOException;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.Cookie;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  11. public class HelloCookie extends HttpServlet{
  12.     public void service(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
  13.         String firstname=request.getParameter("firstname");
  14.         String password=request.getParameter("password");
  15.         if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
  16.             Cookie c1=new Cookie("first",firstname);
  17.             Cookie c2=new Cookie("pass",password);
  18.             c1.setMaxAge(60*60*24);
  19.             c2.setMaxAge(60*60*24);
  20.             c1.setPath("/");
  21.             c2.setPath("/");
  22.             response.addCookie(c1);
  23.             response.addCookie(c2);
  25.                         System.out.println(firstname+"-"+password);
  26.                         //只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
  27.                 request.getRequestDispatcher("index.jsp").forward(request, response);
  28.         }else{
  29.             response.sendRedirect("hello.jsp");
  30.         }
  34.     }
  35. }

4.web.xml中添加如下代码

  1. <servlet>
  2.         <servlet-name>servlet1</servlet-name>
  3.         <servlet-class>test.HelloCookie</servlet-class>
  4.     </servlet>
  5.     <servlet-mapping>
  6.         <servlet-name>servlet1</servlet-name>
  7.         <url-pattern>/aaa</url-pattern>
  8.     </servlet-mapping>

5.运行效果：

20190928213926756.png

6.输入账号密码登录后：

20190928214003345.png

7.退出后重新登录：

2019092821404491.png

练习三

和练习一结构目录相同，但是代码有所改变

hello.jsp

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 7

  1. <%@ page language="java" contentType="text/html;  charset=utf-8"  pageEncoding="utf-8" %>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Insert title here</title>
  5. </head>
  6. <body>
  8.     <form action="index.jsp">
  9.         firstname:<input type="text" name="firstname"  placeholder="请输入账号"></input></br>
  10.         password:<input type="password" name="password"  placeholder="请输入密码"></input></br>
  11.         <input type="submit" value="提交"></input>
  12.     </form>
  14. </body>
  15. </html>

index.jsp

  1. <html>
  2. <head>
  3. <title>Hello World</title>
  4. </head>
  5. <body>
  6. Hello World!<br/>
  7. <%
  8.     //第一步：获取登录信息
  9.     String firstname=request.getParameter("firstname");
  10.     String password=request.getParameter("password");
  11.     //第二步：如果登录信息不为空，则将登录信息保存在cookie中
  12.     if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
  13.         Cookie c1=new Cookie("first",firstname);
  14.         Cookie c2=new Cookie("pass",password);
  15.         c1.setMaxAge(60*60*24);
  16.         c2.setMaxAge(60*60*24);
  17.         c1.setPath("/");
  18.         c2.setPath("/");
  19.         response.addCookie(c1);
  20.         response.addCookie(c2);
  22.     }else{//第三步：如果登录信息为空，则从cookie中获取上一次的登录信息
  23.         Cookie[] c1=request.getCookies();
  24.         for(Cookie c:c1){
  25.             String cookiename=c.getName();
  26.             if("first".equals(cookiename)){
  27.                 String val=c.getValue();
  28.                 firstname=val;
  29.             }
  30.             if("pass".equals(cookiename)){
  31.                 String val=c.getValue();
  32.                 password=val;
  33.             }
  34.         }
  35.     }
  37.     //第四步：如果登录信息不为空，则跳转到hello.jsp,如果登录信息为空，则返回登录页面
  38.     if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
  39.         out.println(firstname+"-"+password);
  40.     }else{
  41.         response.sendRedirect("hello.jsp");
  42.     }
  43. %>
  44. </body>
  45. </html>

运行效果：在首次登录之后，再次访问hello.jsp页面，即使登录信息为空，也可使用上一次的登录信息登录成功。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 8

练习四

当首次输入并选择记住密码后，重启浏览器再次访问后，在输入栏会自动显示上次登录的信息

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <script>
  7.         /**用户登录，其中需要判断是否选择记住密码**/
  8.         function checkCookie(){     
  9.             //简单验证一下  
  10.             var userName = document.getElementById("firstname").value;  
  11.             if(userName == ''){  
  12.                 alert("请输入用户名。");  
  13.                 return;  
  14.             }  
  15.             var userPass = document.getElementById("password").value;  
  16.             if(userPass == ''){  
  17.                 alert("请输入密码。");  
  18.                 return;  
  19.             }  
  20.             var objChk = document.getElementById("chkRememberPass");  
  21.             if(objChk.checked){  
  22.                 //添加cookie  
  23.                 setCookie("first",userName,7);  
  24.                 setCookie("pass",userPass,7);  
  25.                 alert("记住了你的密码登录。");  
  26.             }else{  
  27.                 alert("不记密码登录。");   
  28.             }  
  29.         }
  31.         /**添加设置cookie**/  
  32.         function setCookie(cname,cvalue,exdays){   
  33.             var d = new Date();
  34.             d.setTime(d.getTime() + (exdays*24*60*60*1000));
  35.             var expires = "expires=" + d.toGMTString();
  36.             document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";  
  37.         }  
  39.         /**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/ 
  40.         window.onload = function(){  
  41.             var userNameValue = getCookieValue("first"); 
  42.             var userPassValue = getCookieValue("pass"); 
  43.             //可在console中看到输出的userNameValue+"-"+userPassValue
  44.             console.log(userNameValue+"-"+userPassValue);
  45.             document.getElementById("firstname").value = userNameValue;  
  46.             document.getElementById("password").value = userPassValue;  
  47.         }
  49.         /**获取每个输入的值**/
  50.         function getCookieValue(cname) {
  51.             var name = cname + "=";
  52.             var decodedCookie = decodeURIComponent(document.cookie);
  53.             var ca = decodedCookie.split(';');
  54.             for(var i = 0; i <ca.length; i++) {
  55.                 var c = ca[i];
  56.                 while (c.charAt(0) == ' ') {
  57.                     c = c.substring(1);
  58.                  }
  59.                  if (c.indexOf(name) == 0) {
  60.                     return c.substring(name.length, c.length);
  61.                  }
  62.              }
  63.             return "";
  64.         } 
  65.  </Script>
  66. </head>
  67. <body">
  68.     <form  method="post">
  69.         用户名:<input type="text" id="firstname" name="firstname" " placeholder="请输入账号"></input></br>
  70.         密码:<input type="password" id="password" name="password"  placeholder="请输入密码"></input></br>
  71.         <span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span>  
  72.         <input type="checkbox" id="chkRememberPass" name="chkRememberPass" /></br>
  73.         <input type="submit" value="提交" onclick="checkCookie()"></input>
  74.         <input type="reset" name="reset" value="重置"/>
  75.     </form>
  77. </body>
  78. </html>

js cookie详解：https://www.w3school.com.cn/js/js_cookies.asp

#

练习五

项目目录结构

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 9

HelloCookie.java

  1. package test;
  3. import java.io.IOException;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.Cookie;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  11. public class HelloCookie extends HttpServlet{
  12.     public void service(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
  13.         String firstname=request.getParameter("firstname");
  14.         String password=request.getParameter("password");
  15.         if(firstname!=null&&password!=null&&firstname!=""&&password!=""){
  16.             Cookie c1=new Cookie("first",firstname);
  17.             Cookie c2=new Cookie("pass",password);
  18.             c1.setMaxAge(60*60*24);
  19.             c2.setMaxAge(60*60*24);
  20.             c1.setPath("/");
  21.             c2.setPath("/");
  22.             response.addCookie(c1);
  23.             response.addCookie(c2);
  25.                         System.out.println(firstname+"-"+password);
  26.                         //只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
  27.                 request.getRequestDispatcher("index.jsp").forward(request, response);
  28.         }else{
  29.             response.sendRedirect("hello.jsp");
  30.         }
  34.     }
  35. }

web.xml

  1. <servlet>
  2.         <servlet-name>servlet1</servlet-name>
  3.         <servlet-class>test.HelloCookie</servlet-class>
  4.     </servlet>
  5.     <servlet-mapping>
  6.         <servlet-name>servlet1</servlet-name>
  7.         <url-pattern>/aaa</url-pattern>
  8.     </servlet-mapping>

login.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.     <!-- 引入jquery和cookie -->
  9.     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  10.     <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  11.     <script>
  12.         $(document).ready(function(){
  13.             var firstname=$.cookie("first");
  14.             var password=$.cookie("pass");
  15.             $("#firstname").val(firstname);
  16.             $("#password").val(password);
  17.         });
  18.     </script>
  20.     <form action="aaa">
  21.         firstname:<input type="text" id="firstname" name="firstname" " placeholder="请输入账号"></input></br>
  22.         password:<input type="password" id="password" name="password"  placeholder="请输入密码"></input></br>
  23.         <input type="submit" value="提交"></input>
  24.     </form>
  25. </body>
  26. </html>

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.     <p>成功啦</p>
  9. </body>
  10. </html>

运行效果：

20190929012556188.png

当输入登录信息并提交后，再次访问login.html时，输入信息栏会自动出现登录信息。

练习六

比如腾讯产品家族：腾讯网（www.qq.com）是一级域名，qq音乐（y.qq.com）、qq空间（qzone.qq.com）、qq邮箱（mail.qq.com）、电脑管家（guanjia.qq.com）、英雄联盟（lol.qq.com）等都是二级域名

项目结构目录

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 10

1.HelloCookie.java

  1. import java.io.IOException;
  3. import javax.servlet.ServletException;
  4. import javax.servlet.http.Cookie;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  9. public class HelloCookie extends HttpServlet{
  10.     public void service(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
  11.         String username=request.getParameter("username");
  12.         String password=request.getParameter("password");
  13.         if(username!=null&&password!=null&&username!=""&&password!=""){
  14.             Cookie c1=new Cookie("user",username);
  15.             Cookie c2=new Cookie("pass",password);
  16.             c1.setMaxAge(60*60*24);
  17.             c2.setMaxAge(60*60*24);
  18.             c1.setPath("/");
  19.             c2.setPath("/");
  20.             response.addCookie(c1);
  21.             response.addCookie(c2);
  23.             System.out.println(username+"-"+password);
  24.             System.out.println(request.getServletPath());
  25.             System.out.println(request.getContextPath());
  26.             System.out.println(request.getRequestURI());
  27.             String path=request.getServletPath();
  28.             if(path=="/qq") {
  29.                 System.out.println("准备进入腾讯网主页");
  30.                 request.setAttribute("name", "这是腾讯网主页");
  31.                 //只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
  32.                 request.getRequestDispatcher("success.jsp").forward(request, response);
  33.             }
  34.             if(path=="/lol") {
  35.                 System.out.println("准备进入lol主页");
  36.                 request.setAttribute("name", "这是lol主页");
  37.                 //只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
  38.                 request.getRequestDispatcher("success.jsp").forward(request, response);
  39.             }
  40.             if(path=="/email") {
  41.                 System.out.println("准备进入qq邮箱主页");
  42.                 request.setAttribute("name", "这是email主页");
  43.                 //只有在服务端跳转，hello.jsp数据才能传递到index.jsp页面,注意request的生命周期
  44.                 request.getRequestDispatcher("success.jsp").forward(request, response);
  46.             }
  48.         }else {
  49.             response.sendRedirect("index.html");
  50.         }
  52.     }
  53. }

2.LogoutServlet.java

  1. package test;
  3. import java.io.IOException;
  5. import javax.servlet.ServletException;
  6. import javax.servlet.http.Cookie;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10. import javax.servlet.http.HttpSession;
  12. public class LogoutServlet extends HttpServlet {
  13.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  14.         doGet(request, response);
  15.     }
  17.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18.         // 遍历浏览器发送到服务器端的所有Cookie，找到自己设置的Cookie
  19.         Cookie[] cookies=request.getCookies();
  20.         if(cookies==null) {
  21.             response.sendRedirect("index.html");
  22.         }else {
  23.             for(Cookie c:cookies) {
  24.                 // 设置Cookie立即失效
  25.                 c.setMaxAge(0);
  26.                 /**
  27.                  * 删除Cookie时，只设置maxAge=0将不能够从浏览器中删除cookie,
  28.                  * 因为一个Cookie应当属于一个path，所以删除时，Cookie的这个属性也必须设置。
  29.                  */
  30.                 c.setPath("/");
  31.                 response.addCookie(c);
  32.             }
  33.         }
  34.         response.sendRedirect("logOut.jsp");
  37.     }
  38. }

3.web.xml添加如下

  1. <!-- qq -->
  2.     <servlet>
  3.         <servlet-name>servlet1</servlet-name>
  4.         <servlet-class>test.HelloCookie</servlet-class>
  5.     </servlet>
  6.     <servlet-mapping>
  7.         <servlet-name>servlet1</servlet-name>
  8.         <url-pattern>/qq</url-pattern>
  9.     </servlet-mapping>
  11.     <!-- lol -->
  12.     <servlet>
  13.         <servlet-name>servlet2</servlet-name>
  14.         <servlet-class>test.HelloCookie</servlet-class>
  15.     </servlet>
  16.     <servlet-mapping>
  17.         <servlet-name>servlet2</servlet-name>
  18.         <url-pattern>/lol</url-pattern>
  19.     </servlet-mapping>
  21.     <!-- email -->
  22.     <servlet>
  23.         <servlet-name>servlet3</servlet-name>
  24.         <servlet-class>test.HelloCookie</servlet-class>
  25.     </servlet>
  26.     <servlet-mapping>
  27.         <servlet-name>servlet3</servlet-name>
  28.         <url-pattern>/email</url-pattern>
  29.     </servlet-mapping>
  31.     <!-- loginOut -->
  32.     <servlet>
  33.         <servlet-name>servlet4</servlet-name>
  34.         <servlet-class>test.LogoutServlet</servlet-class>
  35.     </servlet>
  36.     <servlet-mapping>
  37.         <servlet-name>servlet4</servlet-name>
  38.         <url-pattern>/loginOut</url-pattern>
  39.     </servlet-mapping>

4.index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.     <p>这是腾讯网</p>
  9.     <a href="loginQQ.html">登录</a></br>
  10.     <a href="loginLOL.html">英雄联盟</a></br>
  11.     <a href="loginEmail.html">qq邮箱</a></br>
  12.     <p>......</p>
  13.     <a href="loginOut">退出</a></br>
  14. </body>
  15. </html>

5.loginQQ.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>登录QQ</title>
  6. </head>
  7. <body>
  8.     <!-- 引入jquery和cookie -->
  9.     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  10.     <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  11.     <script>
  12.         $(document).ready(function(){
  13.             var username=$.cookie("user");
  14.             var password=$.cookie("pass");
  15.             $("#username").val(username);
  16.             $("#password").val(password);
  17.         });
  18.     </script>
  20.     <h3>QQ登录</h3>
  21.     <form action="qq" method="post">
  22.         <label>用户名：</label><input type="text" id="username" name="username"><br/>
  23.         <label>密　码：</label><input type="password" id="password" name="password"><br/>
  24.         <input type="submit" value="登录">
  25.     </form>
  26. </body>
  27. </html>

6.loginLOL.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>登录英雄联盟</title>
  6. </head>
  7. <body>
  8.     <!-- 引入jquery和cookie -->
  9.     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  10.     <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  11.     <script>
  12.         $(document).ready(function(){
  13.             var username=$.cookie("user");
  14.             var password=$.cookie("pass");
  15.             $("#username").val(username);
  16.             $("#password").val(password);
  17.         });
  18.     </script>
  20.     <h3>英雄联盟登录</h3>
  21.     <form action="lol" method="post">
  22.         <label>用户名：</label><input type="text" id="username" name="username"><br/>
  23.         <label>密　码：</label><input type="password" id="password" name="password"><br/>
  24.         <input type="submit" value="登录">
  25.     </form>
  26. </body>
  27. </html>

7.loginEmail.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>登录QQ邮箱</title>
  6. </head>
  7. <body>
  8.     <!-- 引入jquery和cookie -->
  9.     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  10.     <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
  11.     <script>
  12.         $(document).ready(function(){
  13.             var username=$.cookie("user");
  14.             var password=$.cookie("pass");
  15.             $("#username").val(username);
  16.             $("#password").val(password);
  17.         });
  18.     </script>
  20.     <h3>QQ邮箱登录</h3>
  21.     <form action="email" method="post">
  22.         <label>用户名：</label><input type="text" id="username" name="username"><br/>
  23.         <label>密　码：</label><input type="password" id="password" name="password"><br/>
  24.         <input type="submit" value="登录">
  25.     </form>
  26. </body>
  27. </html>

8.success.jsp

  1. <%@ page language="java" contentType="text/html;  charset=utf-8"  pageEncoding="utf-8" %>
  2. <?xml version="1.0" encoding="UTF-8" ?>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9.     <SCRIPT type="text/javascript">
  10.         alert("登录成功！！！");
  11.     </SCRIPT>
  12.     <%
  13.         out.println(request.getAttribute("name"));
  14.     %>
  16. </body>
  17. </html>

9.logOut.jsp

  1. <%@ page language="java" contentType="text/html;  charset=utf-8"  pageEncoding="utf-8" %>
  2. <?xml version="1.0" encoding="UTF-8" ?>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Insert title here</title>
  7. </head>
  8. <body>
  9.     <SCRIPT type="text/javascript">
  10.         alert("退出成功！！！");
  11.     </SCRIPT>
  12.     <%
  13.         Cookie[] cookies=request.getCookies();
  14.         if(cookies!=null){
  15.             for(Cookie c:cookies){
  16.                 String name=c.getName();
  17.                 String value=c.getValue();
  18.                 out.println(name+"---"+value+";");
  19.             }
  20.         }
  21.     %>
  22.     <p>这是退出之后的页面</p>
  24. </body>
  25. </html>

运行效果：访问http://localhost:8080/testCookie/index.html

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 11

因为qq、lol、qq邮箱同属于腾讯产品，所以此项目实现3者只要登录一个，其他两者就可以自动获取账号和密码，实现自动登录功能，并且在点击退出按钮后，可以退出账号，下次登录时，需要重新输入账号和密码。模拟www.qq.com实现记住用户信息。

发表评论

表情：
评论列表 （有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读