前端 js 操作 Cookie 详细介绍与案例_js cookie

1 前言

1.1 详细介绍

1. 名称和值：Cookie由一个名称和对应的值组成。名称是一个字符串，用于标识Cookie，而值则是与名称相关联的数据。
2. 域名：每个Cookie都与特定的域名相关联。Cookie只会被发送到与其关联的域名下的请求中。
3. 路径：Cookie可以与特定的路径相关联。当浏览器向指定路径下的服务器发送请求时，与该路径相关联的Cookie将被附加到请求中。
4. 过期时间：Cookie可以设置一个过期时间，以指定Cookie的有效期限。一旦超过该时间，浏览器将不再发送该Cookie。
5. 安全标志：通过设置安全标志，可以将Cookie限制为仅在通过HTTPS（安全的加密协议）进行通信时发送。
6. HTTP Only标志：设置HTTP Only标志后，Cookie将无法通过客户端的脚本访问，这有助于防止跨站点脚本攻击（XSS）。

1.2 Cookie的工作流程

1. 服务器发送一个包含Cookie的HTTP响应头给浏览器，响应头中包含了名称、值和其他相关信息。
2. 浏览器接收到响应后，会将Cookie存储在本地的Cookie存储中。
3. 当浏览器向同一域名下的服务器发送后续请求时，会自动附加存储在本地的Cookie信息到请求的HTTP头中。
4. 服务器接收到请求后，可以读取Cookie中的值并根据需要做出相应的处理。

通过使用Cookie，服务器可以在不同的HTTP请求之间保持会话状态、记录用户首选项、实现购物车功能、进行用户跟踪等。然而，Cookie也有一些限制，包括存储容量的限制、跨域访问的限制以及安全性方面的考虑。

值得注意的是，由于隐私和安全的考虑，最近几年来，浏览器对Cookie的限制和隐私保护机制也有所增加，例如同源策略、Cookie的SameSite属性和用户对Cookie的控制选项等

哈喽，大家好，我是[有勇气的牛排]（全网同名）