js：一次性说清楚Cookie 是什么？有哪些字段？增删改查（附代码）？

一、Cookie 是什么？

1、定义

Cookie 是一种在客户端（通常是浏览器）存储数据的技术，用于在用户浏览网页时跟踪和识别用户。
Cookie 由服务器发送给客户端，并存储在客户端的计算机上。
当用户访问同一个网站时，浏览器会将 Cookie 发送回服务器，以便服务器能够识别用户并提供个性化的服务。

2、主要用途

1、会话管理：用于跟踪用户的登录状态和会话信息，例如购物车内容、用户偏好等。
2、个性化：存储用户的个性化设置，例如语言偏好、主题选择等。
3、跟踪：用于分析用户行为，例如广告投放、用户行为分析等。

3、类型

1、会话 Cookie：临时存储在浏览器内存中，浏览器关闭后自动删除。
2、持久 Cookie：存储在用户的硬盘上，直到过期时间到达或用户手动删除。
3、安全 Cookie：只能通过 HTTPS 协议发送，不能通过 HTTP 发送，以防止中间人攻击。
4、HttpOnly Cookie：不能通过 JavaScript 访问，只能通过 HTTP 请求发送，以防止跨站脚本攻击（XSS）。
5、SameSite Cookie：控制 Cookie 在跨站请求中的发送行为，有 Strict、Lax 和 None 三种值。

二、Cookie有哪些字段？

1、Name（名称）：Cookie 的唯一标识符，用于区分不同的 Cookie。没有默认值，必须显式指定。
2、Value（值）：与 Cookie 名称相关联的数据。没有默认值，必须显式指定。
3、Domain（域）：指定 Cookie 可以发送到的域名。例如，如果域名是 example.com，那么 Cookie 可以发送给 example.com 及其子域名（如 sub.example.com）。默认值是设置 Cookie 的域名。例如，如果在 example.com 上设置 Cookie，默认域名就是 example.com。
4、Path（路径）：指定 Cookie 可以发送到的 URL 路径。例如，如果路径是 /admin，那么 Cookie 只会发送给 /admin 及其子路径（如 /admin/settings）。默认值是设置 Cookie 的路径。例如，如果在 /admin 路径下设置 Cookie，默认路径就是 /admin。
5、Expires/Max-Age（过期时间/最大年龄）：指定 Cookie 的有效期。Expires 是一个具体的日期时间(UTC)，而 Max-Age 是一个以秒为单位的持续时间。如果这两个字段都没有设置，Cookie 将是会话 Cookie，浏览器关闭后会被删除。如果没有设置，Cookie 将是会话 Cookie，浏览器关闭后会被删除。
6、Secure（安全）：如果设置了该字段，Cookie 只能通过 HTTPS 协议发送，不能通过 HTTP 发送。默认值是 false，即 Cookie 可以通过 HTTP 和 HTTPS 发送。
7、HttpOnly（仅限 HTTP）：如果设置了该字段，Cookie 不能通过 JavaScript 访问，只能通过 HTTP 请求发送。这有助于防止跨站脚本攻击（XSS）。默认值是 false，即 Cookie 可以通过 JavaScript 访问。
8、SameSite（同站）：控制 Cookie 在跨站请求中的发送行为。有三个可能的值：Strict（仅在同站请求中发送）、Lax（在某些跨站请求中发送）和 None（在所有请求中发送，但需要同时设置 Secure 标志）。默认值在不同浏览器中可能有所不同，但通常是 None 或 Lax。现代浏览器倾向于默认使用 Lax 以提高安全性。

三、Cookie 的增删改查？

1、增加 Cookie

/**
 * 设置 Cookie
 * @param {String} name  Cookie 名称
 * @param {String} value Cookie 值
 * @param {Number} days  Cookie 有效期（天）
 * @param {String} path  Cookie 路径
 * @param {String} domain Cookie 域名
 * @param {Boolean} secure 是否仅通过 HTTPS 发送
 */
function setCookie(name, value, days, path = '/', domain = '', secure = false) {
    let expires = ''; // 默认到期时间为空
    if (days) {
        const date = new Date(); // 获取当前时间
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // 将有效期天数转换为时间戳，加给当前时间，就是到期时间
        expires = `; expires=${date.toUTCString()}`; // expires是UTC格式，转换为UTC时间格式，设置为expires
    }
    document.cookie = `${name}=${value}${expires}; path=${path}`; // 设置基本cookie
    if (domain) {
        document.cookie += `; domain=${domain}`; // 如果有domain，则设置domain
    }
    if (secure) {
        document.cookie += '; secure'; // 如果有secure为true，则设置secure
    }
}

2、删除 Cookie

原理：就是设置cookie的过期时间

/**
 * 删除 Cookie
 * @param {String} name Cookie 名称
 */
function deleteCookie(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`; // 方法1：把expires设置为过去时间
    document.cookie = `${name}=; max-age=-1; path=/;`; // 方法2：把max-age设置为-1
}

3、修改 Cookie

修改 Cookie 实际上就是使用相同的名称重新设置 Cookie。

/**
 * 修改 Cookie
 * @param {String} name  Cookie 名称
 * @param {String} value Cookie 新值
 * @param {Number} days  Cookie 有效期（天）
 * @param {String} path  Cookie 路径
 * @param {String} domain Cookie 域名
 * @param {Boolean} secure 是否仅通过 HTTPS 发送
 */
function updateCookie(name, value, days, path = '/', domain = '', secure = false) {
    setCookie(name, value, days, path, domain, secure); // 调用上面定义的设置 Cookie 方法
}

4、查询 Cookie

/**
 * 获取 Cookie
 * @param {String} name Cookie 名称
 * @returns {String|null} Cookie 值，如果不存在则返回 null
 */
function getCookie(name) {
    const nameEQ = `${name}=`; // cookie名称
    const cookies = document.cookie.split(';'); // 将一个cookie 分割为各个字段数组
    for (let i = 0; i < cookies.length; i++) { // 循环该cookie的各个字段
        let cookie = cookies[i]; // 每个字段
        while (cookie.charAt(0) === ' ') { // 循环删掉该字段的前摇空格，直到开头不再是空格
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) === 0) { // 如果找到name字段，则取出来name字段后面的value，并返回value
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }
    return null; // 如果没有找到name字段，则返回null
}

5、示例使用

// 设置 Cookie - name为username，value为JohnDoe，过期时间为7天
setCookie('username', 'JohnDoe', 7);

// 获取 Cookie
const username = getCookie('username');
console.log(username); // 输出: JohnDoe

// 修改 Cookie
updateCookie('username', 'Mary', 7);

// 删除 Cookie
deleteCookie('username');