当前位置：首页 > article >正文

学习Cookie 基础

article 2025/3/1 0:50:04

前言

为什么要使用cookie ？

前言

本篇博客核心是理解：为什么要使用Cookie ？以及如何使用 Cookie

为什么要使用cookie ？

应用场景：我想在登录界面添加一个“记住我” 一个功能。是当我们第一次输入正确的用户名和密码，点击” 记住我“ 会将登录的成功的用户信息，保存的浏览器。当我们二次登录时，会自动出现在输入框中。

如下图所示

之前上面有提到：把正确的用户信息，存储到浏览器【客户端】中。

为什么要存储到客户端？为什么不把数据存储在服务器呢？

1 为什么不把数据存储到服务器？

原因如下：

缓解服务器的压力

我们知道，如果用户的每一次成功登录，我们都把数据放在服务器，随着用户量的增加，这样服务器，承担的压力会越来越大

2 如果存储到客户端,应该放哪里呢？

如果说存储在硬盘上。这样也可以，但操作比较麻烦，每一次都需要进行读写操作。因此我们最终是把用户的正确信息存储在浏览器

应该存储到浏览器的哪一个地方呢？

打开浏览器，鼠标点击右键，找到应用程序

如下图所示

我们发现有三个地方可以存储数据：本地存储，会话存储，使用Cookie 存储

我们知道，本地存储，会话存储都是使用纯JavaScript ； Cookie 使用到了Java 语言

我们应该选择 Cookie

原因：我们知道，当我们做登录时是需要在后端做一些逻辑处理的。

步骤如下：

1 读取用户输入的信息，和数据库中存储的用户信息比对

2 如果相同，看是否勾选 ”记住我“ 这一个选项

3 如果选择，在后端就把用户信息，存在Cookie 中；在前端就从Cookie 中获取

Cookie更多地被用作客户端和服务器之间通信的桥梁将服务器的一些数据，存储到浏览cookie中，在前端时再从浏览器cookie中获取这些数据。

1 存储数据的方式是以 key -value 键值对的方式存储

2 存储在Cookie 数据有效存活时间是会话级别【只有当关闭浏览器，才会自动销毁Cookie]

看一下Cookie 的部分源代码

 // 设置最大存储时间 一般默认是 七天
 public void setMaxAge(int expiry) {
        this.maxAge = expiry;
    }

    public int getMaxAge() {
        return this.maxAge;
    }
// 在Cookie中，setPath(String uri)方法用于设置Cookie的路径属性。
//这个路径属性定义了Cookie可以被发送到服务器上的哪些路径

    public void setPath(String uri) {
        this.path = uri;
    }

    public String getPath() {
        return this.path;
    }

    public void setSecure(boolean flag) {
        this.secure = flag;
    }

    public boolean getSecure() {
        return this.secure;
    }
// 获取存储的key 值

    public String getName() {
        return this.name;
    }

    public void setValue(String newValue) {
        this.value = newValue;
    }
// 获取 value值

    public String getValue() {
        return this.value;
    }

1 public void setMaxAge(int expiry)

设置最大存储时间一般默认是当前浏览器中有效

2 public void setPath(String uri)

用于设置Cookie的路径属性。这个路径属性定义了Cookie可以被发送到服务器上的哪些路径

路径限制：
- 当您为一个Cookie设置了特定的路径，那么只有当浏览器请求的URL路径与这个路径匹配或者其子路径时，Cookie才会被包含在HTTP请求中发送给服务器。
默认路径：
- 如果没有明确设置路径，Cookie的路径默认为Cookie被设置时的请求路径。如果Cookie是在根路径（/）设置的，那么它将对整个域名下的请求都有效。
子路径匹配：
- 如果设置的路径是/path，那么任何以/path开头的路径（如/path/to/resource）都会被认为是匹配的，Cookie会被发送。
安全性：
- 通过限制Cookie的路径，可以增加一定的安全性，因为这样Cookie不会被发送到不应该接收它的路径。
示例：
- 如果您有一个网站example.com，并且您设置了Cookie的路径为/app，那么只有当请求的URL路径以/app开头时（例如/app/page1，/app/page2），这个Cookie才会被发送。

如何理解子路径？

假设有一个基本路径/base，那么任何以/base开头的路径都可以被认为是/base的子路径。
例如，/base的子路径可以是/base/sub1、/base/sub2、/base/sub1/more等

3 public String getName()

获取存储的key 值

4 public String getValue()

获取 value 值

在后端的cookie 存储数据代码

完整的存储数据代码如下：

   //创建Cookie对象，设置cookie的过期时间，设置cookie的value，设置cookie的name
                    Cookie cookie1 = new Cookie("username", user);
                    Cookie cookie2 = new Cookie("password", password);
                    //设置cookie的过期时间，单位为秒，默认为-1，表示关闭浏览器就失效，这里设置成7天
                    cookie1.setMaxAge(60 * 60 * 24 * 7);
                    cookie2.setMaxAge(60 * 60 * 24 * 7);
                    //设置cookie的路径，默认为/，表示所有路径下都生效
                    cookie1.setPath("/");
                    cookie2.setPath("/");
                    //报存cookie 到浏览器
                    resp.addCookie(cookie1);
                    resp.addCookie(cookie2);

设置存活时间，设置路径，即使你不写，一般会默认：

设置存活时间：默认是当前浏览器中有效，一旦浏览器关闭，表示该数据就无效了【不存在了】

设置路径：默认是第一次请求时的路径 / 下任意路径都可以访问该Cookie

核心代码如下所示

      Cookie cookie1 = new Cookie("key1", "value1");
        Cookie cookie2 = new Cookie("key2", "value2");
        resp.addCookie(cookie1);
        resp.addCookie(cookie2);

大家发现，重新打开浏览器看应用程序多了两行

在前端的获得数据代码

注意；这里的获得value值和之前我们使用 getParameter（"key"）方法有所不同

原因：getParameter() 方法可以通过参数 key ,获得指定的value值的。但是getValue（）方法是没有参数的。

        Cookie[] cookies = req.getCookies();
        for (Cookie cookie : cookies) {
            if (cookie.getName().equals("key1")){
                String value1 = cookie.getValue();
                System.out.println(value1);
            }else if (cookie.getName().equals("key2")){
                String value2 = cookie.getValue();
                System.out.println(value2);
            }
        }

运行结果如下图所示：

Cookie 实例【记住我】

后端Servlet 代码

package fs.web;
import fs.entity.Logininfo;
import fs.service.LoginService;
import fs.service.impl.LoginServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.Objects;
@WebServlet(value = "/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 设置请求体的编码
        req.setCharacterEncoding("UTF-8");
        //进行验证码验证，获取用户输入的验证码
        String verifycode = req.getParameter("verifycode"); //用户输入验证码
        //与session存的验证码比对
        HttpSession session = req.getSession();
        String code = (String) session.getAttribute("CHECKCODE_SERVER");
        if (verifycode.equals(code)) { //相等, 验证码验证通过
            String user = req.getParameter("user");
            String password = req.getParameter("password");
            // 对传来的数据做出处理
            LoginService loginService = new LoginServiceImpl();
            Logininfo login = loginService.login(user, password);
            if (Objects.nonNull(login)) {
                //判断是否勾选记住我，如果勾选，则设置cookie，否则不设置
                String rem = req.getParameter("rem");
                if (rem != null) {
                    //创建Cookie对象，设置cookie的过期时间，设置cookie的value，设置cookie的name
                    Cookie cookie1 = new Cookie("username", user);
                    Cookie cookie2 = new Cookie("password", password);
                    //设置cookie的过期时间，单位为秒，默认为-1，表示关闭浏览器就失效，这里设置成7天
                    cookie1.setMaxAge(60 * 60 * 24 * 7);
                    cookie2.setMaxAge(60 * 60 * 24 * 7);
                    //设置cookie的路径，默认为/，表示所有路径下都生效
                    cookie1.setPath("/");
                    cookie2.setPath("/");
                    //报存cookie 到浏览器
                    resp.addCookie(cookie1);
                    resp.addCookie(cookie2);

                }
                session.setAttribute("login",login);
                //登录成功，重定向 跳转到首页
                // 响应头编码
                resp.setContentType("text/html;charset=UTF-8");
                resp.sendRedirect("/index.jsp");
            } else {
                //登录失败，跳转到登录页面 请求跳转
                req.setAttribute("error","用户名或密码错误");
                req.getRequestDispatcher("/login.jsp").forward(req, resp);
            }


        } else {
            req.setAttribute("error","验证码错误");
            req.getRequestDispatcher("/login.jsp").forward(req, resp);
        }
    }
}

前端 jsp 获得Cookie 数据代码

   <form action="/login" method="post">
<%--  从浏览器获得，存在Cookit的数据      --%>
        <%
            Cookie[] cookies = request.getCookies();
        String user="";
        String password="";
        if(cookies!=null&&cookies.length>=1){
            for(Cookie cookie:cookies){
                if(cookie.getName().equals("username")){
                    //把名为username的cookit的 value 赋给user
                    user=cookie.getValue();
                }
                if(cookie.getName().equals("password")){
                    password=cookie.getValue();
                }
            }
        }
    %>

        <div class="form-group">
            <label for="user">用户名：</label>
            <input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"  value="<%= user%> "/>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" name="password" class="form-control" id="password"   placeholder="请输入用户密码"value="<%= password%>"/>
        </div>
        <div class="form-group">
            <label for="rem">记住我</label>
            <input type="checkbox" class="form-inline" id="rem" name="rem" value="rem"  />
        </div>
    <div class="form-inline">
        <label for="vcode">验证码：</label>
        <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
        <a href="javascript:refreshCode()"><img src="/checkCode" title="看不清点击刷新" id="vcode"/></a>
    </div>
        <hr/>
        <div class="form-group" style="text-align: center;">
            <input class="btn btn btn-primary" type="submit" value="登录">
        </div>
    </form>

查看全文

http://www.kler.cn/a/447143.html