JavaScript Cookie的简介和使用

在现代 Web 开发中，Cookie 是一种常用的客户端存储技术，用于在浏览器和服务器之间传递数据。通过 Cookie，开发者可以存储用户偏好、会话信息等数据，从而实现个性化体验和状态管理。本文将介绍 Cookie 的基本概念，并通过 JavaScript 演示如何操作 Cookie。

1. 什么是 Cookie？

1.1 Cookie 的定义

Cookie 是服务器发送到用户浏览器并保存在本地的一小段数据（通常不超过 4KB）。浏览器会在后续请求中自动将 Cookie 发送回服务器，从而实现状态管理。

1.2 Cookie 的作用

会话管理：保存用户的登录状态、购物车信息等。
个性化设置：存储用户的主题偏好、语言设置等。
跟踪用户行为：用于分析用户行为或广告投放。

1.3 Cookie 的特点

存储大小：每个 Cookie 最大 4KB。
数量限制：每个域名下的 Cookie 数量有限（通常为 20-50 个）。
生命周期：可以设置过期时间，分为会话 Cookie 和持久 Cookie。
安全性：可以通过 HttpOnly、Secure 等属性增强安全性。

2. Cookie 的属性

每个 Cookie 可以包含以下属性：

名称（Name）：Cookie 的唯一标识。
值（Value）：存储的实际数据。
过期时间（Expires）：Cookie 的过期时间，默认为会话结束时失效。
路径（Path）：指定 Cookie 的有效路径。
域名（Domain）：指定 Cookie 的有效域名。
安全性（Secure）：仅通过 HTTPS 协议传输。
HttpOnly：禁止 JavaScript 访问，防止 XSS 攻击。

3. JavaScript 操作 Cookie

3.1 设置 Cookie

通过 document.cookie 可以设置 Cookie。需要注意的是，document.cookie 是一个字符串，每次只能设置一个键值对。

// 设置一个简单的 Cookie
document.cookie = "username=JohnDoe";// 设置带过期时间的 Cookie
const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 天后过期
document.cookie = `username=JohnDoe; expires=${date.toUTCString()}; path=/`;// 设置带域名和 Secure 属性的 Cookie
document.cookie = "username=JohnDoe; domain=example.com; Secure";

3.2 读取 Cookie

通过 document.cookie 可以读取当前域名下的所有 Cookie，返回一个由分号分隔的字符串。

// 读取所有 Cookie
const cookies = document.cookie;
console.log(cookies); // 输出：username=JohnDoe; theme=dark// 解析 Cookie
function getCookie(name) {const cookieArr = document.cookie.split(';');for (let cookie of cookieArr) {const [cookieName, cookieValue] = cookie.trim().split('=');if (cookieName === name) {return decodeURIComponent(cookieValue);}}return null;
}console.log(getCookie("username")); // 输出：JohnDoe

3.3 删除 Cookie

要删除一个 Cookie，只需将其过期时间设置为过去的时间。

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

4. Cookie 的封装使用

4.1 设置 cookie 值的函数

function setCookie(cname,cvalue,exdays)
{// 创建一个新的日期对象var d = new Date();// 设置日期对象为当前时间加上指定的天数d.setTime(d.getTime()+(exdays*24*60*60*1000));// 将过期时间转换为GMT字符串格式var expires = "expires="+d.toGMTString();// 设置cookie字符串，包含名称、值和过期时间document.cookie = cname + "=" + cvalue + "; " + expires;
}

4.2 获取 cookie 值的函数

function getCookie(name) {// 将文档中的所有cookie字符串按分号分割成数组const cookieArr = document.cookie.split(';');// 遍历cookie数组中的每个cookie字符串for (let cookie of cookieArr) {// 将每个cookie字符串按等号分割成名称和值，并去除前后空格const [cookieName, cookieValue] = cookie.trim().split('=');// 检查当前cookie的名称是否与目标名称匹配if (cookieName === name) {// 如果匹配，返回解码后的cookie值return decodeURIComponent(cookieValue);}}// 如果没有找到匹配的cookie，返回nullreturn null;
}

4.3 检测 cookie 值的函数

function checkCookie()
{// 获取名为 "username" 的 cookie 值var username=getCookie("username");// 如果 cookie 中有用户名if (username!=""){// 弹出欢迎信息alert("Welcome again " + username);}else {// 如果没有用户名，提示用户输入名称username = prompt("Please enter your name:","");// 如果用户输入了名称且不为空if (username!="" && username!=null){// 设置 "username" cookie，有效期为 365 天setCookie("username",username,365);}}
}

5. Cookie 的局限性

尽管 Cookie 非常有用，但它也有一些局限性：

存储容量小：每个 Cookie 最大 4KB，且每个域名下的 Cookie 数量有限。
性能问题：每次请求都会携带 Cookie，可能增加请求负载。
安全性问题：容易被 XSS 和 CSRF 攻击。

6. 可替代方案

对于更复杂的客户端存储需求，可以考虑以下替代方案：

LocalStorage：存储容量更大（通常为 5MB），数据不会随请求发送到服务器。
SessionStorage：类似于 LocalStorage，但数据仅在当前会话中有效。
IndexedDB：支持存储大量结构化数据，适合复杂应用。