1、Cookie简介
- 是由服务器端生成,发送给User-Agent(一般指浏览器),浏览器将cookie信息以键值对的形式保存到某个目录下的文本文件内。下次请求该网站时就把保存的cookie信息发送回服务器。(cookie就是一个小文件,浏览器对其大小一般限制在4k,用来记录一些信息(一般用作标识))
- 简单来说cookie是Web服务器保存在客户端的一系列文本信息。
- cookie的作用
对特定对象的追踪
统计网页浏览次数
简化登录 - 安全性能
信息容易泄露
2、我们为什么要使用Cookie
- 客户端和浏览器端通信使用的Http协议是无状态的,即每次请求对于服务端来讲都是一个新的请求,无法基于前面的信息进行交流,意味着服务器无法从协议连接上追踪会话。
- 因此Web应用需要一种可以保存前面信息(也就是以往客户端和浏览器进行交互的产生的数据信息)的技术,这是会话技术。这样客户端和服务器端每次的交流都可以被追踪到了。
- cookie技术由此诞生而来。
3、Cookie的概念
-
Cookie是会话技术的一种,主要用于将会话过程产生的数据保存到客户端(浏览器),从而使客户端每次和服务端之间可以更好的进行交互。
-
上图描述了Cookie在浏览器和服务器之间的传输过程。当用户第一次通过浏览器访问服务器时,服务器可以在响应信息(response)中增加Set-Cookie响应头,将信息以Cookie为载体响应给浏览器。浏览器接收到服务器发送来的Cookie信息,就会将该保存在浏览器的Cookie缓冲区内。这样,当用户再次通过浏览器访问服务器时,就会取出Cookie缓冲区的信息放在请求协议中,Web服务器就可以通过request中的用户信息来分辨此次请求是由哪个用户发起的(是新用户还是访问过的老用户)。
-
通过上图分析我们可以知道,服务器端可以通过HttpServletRsponse来向客户端发送Cookie。
-
浏览器也可以通过JS来创建和获取Cookie对象。
下面简单解释下几个重要属性: -
maxAge:表示此Cookie在客户端的有效期,单位是秒。默认值为-1,当整个浏览器关闭后,此Cookie失效;当maxAge值为正数时,即此Cookie还剩余多少秒的有效期;当值为0时,此Cookie失效,浏览器进行删除操作。
-
path:表示此Cookie对path下的所属的目录和子目录有效,比如path设置为/test,放客户端发起/test/UserServlet请求时,就会携带上此Cookie;如果想让此Cookie对站点所有的目录有效的话,可以设置为/。
-
domain:表示可以访问此Cookie的域名,如果不设置的话,会根据当前请求url来设置;当我们手动设置时,可以采用以".“开头来定义此Cookie更大的域名访问范围,比如设置domain为”.csdn.net",则当访问"https://lizishudd.blog.csdn.net/“时,一样可以使用此”.csdn.net"下的cookie(当然这里还需要Cookie的path同时满足要求)。
4、测试服务器端Cookie
-
login.jsp
<form id="loginForm" method="post" action="UserServlet" onsubmit="return checkForm(this)"> <table> <input type="hidden" name="op" value="login"/> <tr> <td class="field">用户名:</td> <td><input class="text" type="text" name="userName" onfocus="FocusItem(this)" onblur="CheckItem(this);"/><span></span></td> </tr> <tr> <td class="field">登录密码:</td> <td><input class="text" type="password" id="passWord" name="passWord" onfocus="FocusItem(this)" onblur="CheckItem(this);"/><span></span></td> </tr> <tr id="imgCheckCode"> <td class="field">验证码:</td> <td><input class="text verycode" type="text" name="veryCode" onfocus="FocusItem(this)" onblur="CheckItem(this);"/><img id="veryCode" src="checkCode" onclick="changeCheckCode(this)"/><span></span> </td> </tr> <tr> <td></td> <td> <label class="ui-green"><input type="submit" name="submit" onclick="loginClick(this)" value="立即登录"/></label> <label><a href="forgetPassword.jsp">忘记密码?</a></label> <label style="width:180px;text-align:right;color:red;font-size: 16px;"> ${requestScope.ERRORS}</label> </td> </tr> <tr> <td></td> //checkBox点击框 <td><label><input type="checkbox" name="esayLogin">一天内免登录</label></td> </tr> </table> </form>
注意上述login.jsp中最下方有一个一天内免登陆,checkBox点击框,就是用来测试Cookie存储存储会话信息的。
-
loginServlet中
public void login(HttpServletRequest req, HttpServletResponse resp) { User rtnUser = null; try { User user = new User(); user.setUserName(req.getParameter("userName")); user.setPassword(req.getParameter("passWord")); //判断用户是否勾选一天内免登陆 String esayLogin = req.getParameter("esayLogin"); System.out.println(esayLogin); //判断数据库中是否存在该用户 rtnUser = userService.login(user); //System.out.println(rtnUser); if(rtnUser == null){ req.setAttribute("ERRORS","用户名或密码错误"+loginNum+"次"); req.getRequestDispatcher("login.jsp").forward(req,resp); } }else { //判断是否选择免登陆 if(esayLogin != null){ //创建用户对象 Cookie cookieUserName = new Cookie("userName",user.getUserName()); Cookie cookiePassWord = new Cookie("password",user.getPassword()); //设置有效期都为一天 cookieUserName.setMaxAge(60*60*24); cookiePassWord.setMaxAge(60*60*24); //服务器将Cookie对象返回给客户端浏览器 resp.addCookie(cookieUserName); resp.addCookie(cookiePassWord); } System.out.println("-------------登录成功----------------"); req.getSession().setAttribute("rtnUser",rtnUser); resp.sendRedirect("index.jsp"); } } catch (Exception ex) { ex.printStackTrace(); } }
-
测试结果
5、测试浏览器端的Cookie
- Cookie的创建工作除了在服务器端,还可以在浏览器端通过JavaScript完成。
<script> //创建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; } //获取对应Cookie的值,通过字符串截取的方式 function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name) == 0) return c.substring(name.length, c.length); } return ""; } window.onload = function () { $("userName").value=getCookie("userName"); $("passWord").value=getCookie("passWord"); } //删除Cookie,过期时间提前1天,解决时差问题 function delCookie(cname) { var d = new Date(); d.setTime(d.getTime()-(24*60*60*1000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname + "=; " + expires; } </script>