浏览器Cookie的原理和使用

Cookie 是什么？

Cookie，这个听起来就很美味的名字，在浏览器的世界里，它可是扮演着举足轻重的角色。简单来说，Cookie 是服务器发送到用户浏览器并保存在本地的一小段文本数据，它以键值对的形式存在，就像是一个 “身份小饼干”，每一块饼干上都写着关于你的一些信息。当你访问网站时，服务器会通过 Set-Cookie 响应头把这块 “小饼干” 发送给你的浏览器，浏览器则会乖乖地把它保存起来。当下次你再次访问同一个网站时，浏览器就会自动把对应的 Cookie 放在请求头中发送给服务器，服务器通过解析 Cookie，就能识别出你的身份，知道你之前的一些操作和偏好，列如你是否已经登录、购物车里有什么商品等等。

打个比方，Cookie 就像是你去图书馆办的借阅卡，每次去借书的时候，工作人员只要看一下你的借阅卡，就知道你是谁，借过什么书，有没有逾期未还。HTTP 协议本身是无状态的，就好像图书馆工作人员没有借阅卡的话，每次你去都把你当成新读者，什么信息都不知道。而 Cookie 的出现，就解决了这个问题，让服务器能够 “记住” 你，为你提供更个性化的服务。

为什么需要 Cookie？

HTTP 协议的无状态性，虽然在必定程度上简化了服务器的设计和实现，提高了网络传输的效率，但在实际的 Web 应用中，却给用户体验带来了诸多不便。就好比你去一家餐厅吃饭，每次服务员过来点菜都像第一次见你一样，完全不记得你之前的口味偏好、是否是常客，也不知道你上一道菜吃得怎么样，需不需要加菜。这种 “健忘” 的服务，肯定会让你觉得这家餐厅不够贴心，体验感大打折扣。

在电商购物中，HTTP 协议的无状态性带来的不便就更加明显了。想象一下，你在某电商平台上精挑细选了几件心仪的商品，满心欢喜地加入购物车，准备结账付款。结果，当你点击结算按钮时，页面刷新后购物车居然空空如也，就好像你从来没有添加过商品一样。这是由于 HTTP 协议不会记住你之前添加商品的操作，每次请求都是独立的，服务器并不知道你的购物车状态。又或者，你好不容易登录了账号，浏览了一些商品，结果跳转了一个页面，就被要求重新登录，这无疑会让你感到烦躁和困惑。

而 Cookie 的出现，就像是给 HTTP 协议装上了 “记忆” 的翅膀，完美地解决了这些问题。当你第一次访问电商网站并登录时，服务器会生成一个包含你登录信息的 Cookie 发送给你的浏览器，浏览器将其保存起来。之后，无论你在网站上进行什么操作，列如添加商品到购物车、浏览商品详情、跳转页面，浏览器都会自动在请求头中带上这个 Cookie。服务器通过解析 Cookie，就能识别出你的身份，知道你已经登录，并且能够获取你之前的操作信息，列如购物车中有哪些商品，从而为你提供连贯、个性化的服务。这样，你就可以在电商网站上享受流畅的购物体验，无需反复登录，购物车中的商品也能一直保留，直到你完成购物或主动清空。

Cookie 的工作原理

Cookie 的工作过程就像是一场精心编排的舞台剧，涉及服务器、浏览器和用户之间的一系列交互，每一个环节都至关重大，共同构成了我们在网络世界中便捷、个性化的体验。下面，让我们深入幕后，详细了解这场 “舞台剧” 的精彩流程。

（一）服务器设置 Cookie

当你首次访问一个网站，列如登录某社交平台时，服务器就像是这场剧的导演，开始了它的 “指挥”。服务器会通过响应头中的 Set – Cookie 字段向你的浏览器发送 Cookie。这个字段就像是一个装满各种指令的 “百宝盒”，包含了 Cookie 的名称、值以及其他控制 Cookie 行为的重大属性。

假设你成功登录了某社交平台，服务器可能会返回这样一个 Set – Cookie 头：

Set - Cookie: userId=12345; Expires=Thu, 31 Dec 2026 23:59:59 GMT; Path=/; Domain=example.com; Secure; HttpOnly

在这个例子中：

“userId = 12345” 是 Cookie 的核心数据，其中 “userId” 是 Cookie 的名称，就像是给这个 “小饼干” 取的名字，方便服务器识别；“12345” 是 Cookie 的值，它记录着你的用户标识，服务器通过这个值就能知道你是谁。

“Expires = Thu, 31 Dec 2026 23:59:59 GMT” 设置了 Cookie 的过期时间，这意味着到了 2026 年 12 月 31 日 23 点 59 分 59 秒，这个 Cookie 就会失效，浏览器将不再发送它。如果没有设置这个属性，Cookie 一般是会话级别的，也就是在你关闭浏览器时就会被删除。

“Path = /” 表明 Cookie 的生效路径，这里设置为根路径 “/”，说明在整个网站的所有路径下，这个 Cookie 都会生效。如果设置为 “/login”，那么只有在访问 “/login” 路径及其子路径时，才会发送这个 Cookie 。

“Domain = example.com” 指定了 Cookie 所属的域名，只有在访问 “example.com” 及其子域名时，才会发送这个 Cookie。如果设置为 “.example.com”，则所有以 “example.com” 结尾的子域名都可以访问这个 Cookie，列如 “sub.example.com” 。

“Secure” 表明这个 Cookie 只能在 HTTPS 连接中被发送，这是为了确保数据在传输过程中的安全性，防止被窃取或篡改。当你在进行涉及敏感信息的操作，如网上银行转账、购物支付时，“Secure” 属性就像是给你的信息穿上了一层坚固的铠甲，只有在安全的 HTTPS 通道中，Cookie 才会被传输，大大降低了信息泄露的风险。

“HttpOnly” 则限制了 Cookie 只能通过 HTTP 协议访问，不能通过 JavaScript 代码访问。这是一种防范跨站脚本攻击（XSS）的有效手段。在一些恶意的网站中，攻击者可能会利用 XSS 漏洞注入恶意的 JavaScript 代码，如果 Cookie 没有设置 “HttpOnly” 属性，攻击者就有可能通过 JavaScript 获取你的 Cookie，进而冒充你的身份进行各种操作。而设置了 “HttpOnly” 后，就像是给 Cookie 加上了一把锁，只有 HTTP 协议才能打开它，JavaScript 无法触及，从而保护了你的 Cookie 不被恶意获取。

（二）浏览器存储 Cookie

当浏览器收到服务器发送的 Set – Cookie 指令后，就像是一个听话的演员，会按照规则将 Cookie 存储到本地。这些规则就像是演员的表演指南，确保 Cookie 被正确存储和管理。

第一是域名匹配规则。浏览器会检查 Cookie 的 Domain 属性，只有当当前访问的域名与 Cookie 的 Domain 匹配时，才会存储该 Cookie。列如，服务器设置的 Cookie 的 Domain 是 “example.com”，那么只有在你访问 “example.com” 或 “sub.example.com” 等以 “example.com” 结尾的域名时，浏览器才会存储这个 Cookie；如果访问的是 “other.com”，则不会存储。

其次是路径匹配规则。浏览器会根据 Cookie 的 Path 属性来判断是否存储。如果当前请求的路径与 Cookie 的 Path 匹配或者是 Path 的子路径，浏览器就会存储该 Cookie。例如，Cookie 的 Path 设置为 “/docs”，当你访问 “/docs” 或 “/docs/article1” 时，浏览器会存储这个 Cookie；但如果访问的是 “/images”，由于路径不匹配，就不会存储。

安全策略也是浏览器存储 Cookie 时需要遵循的重大规则。如果 Cookie 设置了 “Secure” 属性，那么只有在使用 HTTPS 协议访问网站时，浏览器才会存储这个 Cookie；如果设置了 “HttpOnly” 属性，浏览器会禁止 JavaScript 对该 Cookie 进行读取和修改操作，以增强安全性。

在后续的请求中，只要符合上述匹配规则，浏览器就会自动将对应的 Cookie 附加到请求头的 Cookie 字段中，发送给服务器。列如，当你在登录后的某社交平台上浏览好友动态时，浏览器会自动在请求头中带上包含 “userId” 的 Cookie，告知服务器你已经登录，并且是用户 ID 为 “12345” 的用户。

（三）服务器读取 Cookie

服务器收到浏览器发送的请求后，会从请求头的 Cookie 字段中提取 Cookie 信息。这就像是导演在接收演员传递过来的信息，以便做出相应的决策。

服务器会解析 Cookie 字符串，将其转换为键值对的形式，然后根据这些信息来识别用户身份、获取用户的相关数据或执行其他操作。例如，服务器通过解析包含 “userId = 12345” 的 Cookie，就知道当前请求来自用户 ID 为 “12345” 的用户，进而可以根据这个用户的喜好展示个性化的内容，列如推荐你可能感兴趣的好友、根据你的浏览历史展示相关的动态等；或者验证用户的登录状态，确保只有登录的用户才能访问某些受保护的资源，如私信功能、个人设置页面等。

以 Node.js 为例，服务器可以通过以下方式解析请求头中的 Cookie：

const http = require('http');
const server = http.createServer((req, res) => {
 const cookies = {};
 if (req.headers.cookie) {
 req.headers.cookie.split('; ').forEach(cookie => {
 const parts = cookie.split('=');
 cookies[parts[0]] = parts[1];
 });
 }

 if (cookies.userId) {
 // 根据userId执行相应操作，如查询用户信息、验证登录状态等
 res.end(`欢迎回来，用户ID为 ${cookies.userId} 的用户！`);
 } else {
 res.end('请先登录');
 }
});

server.listen(8080, () => {
 console.log('服务器启动，监听8080端口');
});

在这个例子中，服务器第一检查请求头中是否包含 “Cookie” 字段，如果有，就将其按 “; ” 分割成多个键值对，然后存储在 “cookies” 对象中。通过判断 “cookies” 对象中是否存在 “userId”，服务器可以识别用户身份，并做出相应的响应。

Cookie 的使用场景

（一）身份认证与登录状态保持

当你在各种网站或应用中穿梭时，身份认证与登录状态保持就像是你在数字世界的 “通行证” 和 “记忆徽章” ，而 Cookie 则是这背后的关键技术支撑。以常见的社交媒体平台为例，当你第一次输入用户名和密码点击登录时，服务器会对这些信息进行严格验证。一旦验证通过，服务器就会生成一个包含你用户标识和登录相关信息的 Cookie，列如 “userId=12345; sessionId=abcdef; Expires=Thu, 31 Dec 2026 23:59:59 GMT; Path=/; Domain=socialmedia.com; HttpOnly; Secure”。这个 Cookie 就像是一把特殊的 “钥匙”，被服务器发送到你的浏览器。

之后，无论你是在社交媒体上浏览好友动态、发布新的内容，还是切换不同的页面，浏览器都会自动在请求头中带上这个 Cookie。服务器通过解析接收到的 Cookie，就能准确识别出你的身份，知道你已经登录，并且可以根据 Cookie 中的信息提供个性化的服务。列如，根据你的兴趣爱好推荐相关的话题、展示你关注的人的最新动态等。而且，只要 Cookie 没有过期，你就无需再次输入用户名和密码进行登录，真正实现了便捷、流畅的登录体验，就像拥有了一个永远不会忘记你身份的 “数字管家” 。

（二）个性化设置

在当今这个追求个性化的时代，网站和应用都希望能够为用户提供独一无二的体验，而 Cookie 在实现个性化设置方面发挥着不可或缺的作用。就拿你日常使用的新闻资讯类 APP 来说，当你首次打开并进行一些个性化设置，列如选择你感兴趣的新闻类别（如科技、体育、娱乐等）、设置字体大小和夜间模式等，APP 就会将这些偏好信息存储在 Cookie 中。

假设你将新闻类别设置为 “科技” 和 “体育”，字体大小调整为中等，并且开启了夜间模式。APP 服务器会生成一个类似这样的 Cookie：“preferredCategories=tech,sports; fontSize=medium; nightMode=true; Expires=Thu, 31 Dec 2027 23:59:59 GMT; Path=/; Domain=newsapp.com” 。当你下次再次打开该 APP 时，浏览器会自动将这个 Cookie 发送给服务器。服务器读取 Cookie 后，就会根据你的偏好设置来展示内容。列如，在首页优先推送科技和体育类的新闻文章，并且按照你设置的字体大小和夜间模式来呈现页面，让你感觉这个 APP 就像是专门为你量身定制的一样，大大提升了你的使用体验和满意度。

（三）购物车功能

在电商购物的奇妙之旅中，购物车功能就像是我们的 “数字购物篮”，而 Cookie 则是确保这个 “购物篮” 正常运作的魔法 “小精灵” 。当你在电商平台上精挑细选商品时，每将一件心仪的商品添加到购物车，这些商品信息就会被存储在 Cookie 中。

以某知名电商平台为例，当你把一部手机、一副耳机和一本书添加到购物车时，服务器会在你的浏览器中设置一个包含购物车商品信息的 Cookie，可能类似于 “cartItems=[{“productId”:”12345″,”name”:”智能手机”,”quantity”:1,”price”:3999},{“productId”:”67890″,”name”:”无线耳机”,”quantity”:1,”price”:499},{“productId”:”56789″,”name”:”编程入门书籍”,”quantity”:1,”price”:59}]; Expires=Thu, 07 Dec 2023 23:59:59 GMT; Path=/; Domain=ecommerce.com” 。

这样，无论你是暂时离开购物页面去查看其他商品，还是关闭浏览器后再次回来，只要 Cookie 没有过期，购物车中的商品信息就会一直存在。当你再次访问购物车页面时，浏览器会把这个 Cookie 发送给服务器，服务器根据 Cookie 中的信息，就能准确地展示出你之前添加的所有商品，包括商品的名称、数量和价格等，让你可以继续安心购物，就像你的购物车永远不会 “丢失” 一样，为你提供了无缝、便捷的购物体验。

Cookie 的管理与安全

（一）查看与管理 Cookie

在我们日常使用浏览器的过程中，查看和管理 Cookie 就像是整理我们数字生活中的 “小物件”，虽然看似琐碎，但却对我们的网络体验和隐私保护有着重大的影响。不同的浏览器为我们提供了各具特色的 Cookie 管理方式，下面就为大家详细介绍几种常见浏览器的操作方法。

如果你是谷歌 Chrome 浏览器的忠实用户，查看和管理 Cookie 就如同探索一个精心设计的数字宝库。只需轻轻点击浏览器右上角那三个垂直排列的点，一个充满各种功能选项的菜单便会展开。在这个菜单中，选择 “更多工具”，然后再点击 “清除浏览数据”，就像是打开了一个 “数据清理中心” 。在这里，你可以看到众多关于浏览数据的选项，而 “Cookie 及其他网站数据” 就是我们管理 Cookie 的关键入口。如果你只是想删除某个特定网站的 Cookie，可以按下快捷键 “Ctrl + Shift + I”（Windows 系统）或 “Command + Option + I”（Mac 系统）打开开发者工具。在开发者工具中，点击 “Application” 标签页，就像是进入了一个应用程序的管理界面。

在左侧的菜单中，选择 “Cookies”，此时你会看到所有你访问过的网站域名，点击你想要管理的域名，该域名下存储的所有 Cookie 便会一览无余。你可以在这里轻松地查看每个 Cookie 的详细信息，包括名称、值、过期时间、路径等，还可以根据自己的需求进行删除、修改等操作。

对于使用火狐 Firefox 浏览器的朋友来说，管理 Cookie 同样便捷。点击浏览器右上角的菜单按钮（一般是三条横线的图标），在弹出的菜单中选择 “选项” 。进入选项页面后，点击左侧的 “隐私与安全” 选项卡，就像是走进了一个隐私保护的设置中心。在 “Cookie 和网站数据” 这一板块，你可以看到各种关于 Cookie 的设置选项。你可以选择 “清除历史记录” 来删除所有 Cookie，也可以点击 “管理数据”，进入一个详细的 Cookie 管理界面。在这里，你可以查看每个网站存储的 Cookie，并根据自己的意愿进行删除、允许或阻止等操作。如果你想深入了解某个 Cookie 的详细信息，还可以点击 “详细信息” 按钮，查看其具体的属性和值。

苹果 Safari 浏览器的 Cookie 管理方式则更加简洁直观。打开 Safari 浏览器，点击菜单栏中的 “Safari”，选择 “偏好设置” 。在弹出的偏好设置窗口中，点击 “隐私” 标签页，就像是打开了一扇通往隐私世界的大门。在 “管理网站数据” 部分，你可以看到所有存储在你浏览器中的网站数据，包括 Cookie 。点击 “管理” 按钮，你可以清晰地看到每个网站的 Cookie 列表，并且可以轻松地进行删除、全部删除等操作。此外，Safari 还提供了一些隐私保护的高级设置，列如阻止所有第三方 Cookie，进一步保护你的隐私安全。

微软 Edge 浏览器的 Cookie 管理功能也毫不逊色。点击浏览器右上角的三个点，在弹出的菜单中选择 “设置” 。进入设置页面后，在左侧的菜单中选择 “隐私、搜索和服务” 。在 “Cookies 和网站权限” 这一板块，你可以找到 “管理和删除 Cookie 和网站数据” 的选项。点击进入后，你可以看到所有存储在你浏览器中的 Cookie 列表，并且可以根据自己的需求进行删除、导出等操作。此外，Edge 浏览器还提供了一些隐私保护的功能，列如 “阻止第三方 Cookie”，可以有效地防止第三方网站通过 Cookie 追踪你的浏览行为。

（二）Cookie 的安全风险

在享受 Cookie 带来的便捷网络体验的同时，我们也不能忽视它可能带来的安全风险。就像在现实生活中，我们随身携带的重大物品可能会被不法分子觊觎一样，Cookie 中的敏感信息也可能成为黑客攻击的目标。下面，就让我们一起来深入了解 Cookie 可能面临的安全威胁。

数据泄露是 Cookie 面临的一个主要安全风险。由于 Cookie 一般存储在用户的浏览器中，并且会在每次请求时发送到服务器，这就使得它在传输和存储过程中都存在被窃取的风险。当你在使用公共 Wi-Fi 网络时，你的网络连接可能处于不安全的状态。黑客可以利用网络嗅探工具，如 Wireshark 等，监听你的网络流量，从而获取你在传输过程中的 Cookie 信息。一旦黑客获取了你的 Cookie，他们就可以冒充你的身份，访问你的账户，获取你的个人信息，甚至进行一些非法操作，列如购物、转账等。此外，如果你的设备感染了恶意软件，这些恶意软件也可能会窃取你的 Cookie 信息，将其发送给黑客，导致你的数据泄露。

会话劫持也是一种常见的 Cookie 安全威胁。会话劫持是指攻击者通过获取用户的会话 Cookie，从而接管用户的会话，冒充用户进行操作。攻击者可以通过多种方式获取会话 Cookie，列如跨站脚本攻击（XSS）、会话固定攻击等。在跨站脚本攻击中，攻击者会在目标网站中注入恶意的 JavaScript 代码。当用户访问该网站时，恶意代码就会被执行，攻击者就可以利用这些代码获取用户的会话 Cookie 。然后，攻击者可以使用获取到的 Cookie，在另一台设备上登录用户的账户，从而实现会话劫持。在会话固定攻击中，攻击者会预先设置一个已知的会话 ID，并诱使用户使用这个 ID 进行登录。一旦用户登录成功，攻击者就可以使用这个已知的会话 ID 来接管用户的会话。

除了数据泄露和会话劫持，Cookie 还可能面临其他安全风险，列如 Cookie 被篡改、跨站请求伪造（CSRF）攻击等。Cookie 被篡改是指攻击者修改 Cookie 中的数据，从而达到欺骗服务器的目的。例如，攻击者可以修改购物车 Cookie 中的商品数量和价格，以获取不正当的利益。跨站请求伪造攻击则是指攻击者利用用户已经登录的会话，在用户不知情的情况下，向目标网站发送恶意请求。由于这些请求带有用户的合法 Cookie，服务器会认为这些请求是用户自己发出的，从而执行这些恶意请求，导致用户的账户安全受到威胁。

（三）保护 Cookie 安全的措施

面对 Cookie 可能带来的安全风险，我们不能坐以待毙，而应该采取一系列有效的措施来保护 Cookie 的安全，就像为我们的数字生活穿上一层坚固的铠甲。下面，就为大家提供一些保护 Cookie 安全的实用提议。

合理使用浏览器的隐私设置是保护 Cookie 安全的重大一步。现代浏览器都提供了丰富的隐私设置选项，我们可以根据自己的需求进行合理配置。在 Chrome 浏览器中，你可以在 “设置” – “隐私与安全” – “Cookie 及其他网站数据” 中，选择阻止第三方 Cookie，这样可以有效地防止第三方网站通过 Cookie 追踪你的浏览行为。你还可以选择 “清除浏览数据” 的时间范围，定期清除存储在浏览器中的 Cookie，以减少 Cookie 被窃取的风险。在 Firefox 浏览器中，你可以在 “选项” – “隐私与安全” 中，设置 “跟踪保护” 选项，阻止跟踪器和广告商使用 Cookie 来追踪你的在线活动。你还可以选择 “清除历史记录” 的频率，定期删除 Cookie 和其他浏览数据。

定期清理 Cookie 也是保护 Cookie 安全的有效方法。随着我们在网络上的活动日益频繁，浏览器中存储的 Cookie 数量也会不断增加。这些 Cookie 中可能包含一些已经过期或者不再需要的信息，定期清理 Cookie 可以减少这些无用信息的存储，降低 Cookie 被窃取的风险。你可以根据自己的使用习惯，每周或每月清理一次 Cookie 。在清理 Cookie 时，你可以选择只删除特定网站的 Cookie，也可以选择删除所有 Cookie 。如果你只需要删除某个特定网站的 Cookie，可以在浏览器的 Cookie 管理界面中，找到该网站的 Cookie 并进行删除。如果你想删除所有 Cookie，可以在浏览器的设置中，找到 “清除浏览数据” 选项，选择删除 Cookie 及其他网站数据。

使用安全的网络连接对于保护 Cookie 安全至关重大。当你在使用公共 Wi-Fi 网络时，由于网络环境的不确定性，你的网络连接可能处于不安全的状态，这就增加了 Cookie 被窃取的风险。为了保护 Cookie 的安全，尽量避免在公共 Wi-Fi 网络上进行涉及敏感信息的操作，如网上银行转账、购物支付等。如果必须在公共 Wi-Fi 网络上进行这些操作，使用虚拟专用网络（VPN）来加密你的网络连接。VPN 可以在你的设备和 VPN 服务器之间建立一个安全的通道，所有的数据都会在这个通道中进行加密传输，从而有效地防止数据被窃取。此外，在访问网站时，尽量选择使用 HTTPS 协议的网站。HTTPS 协议通过加密传输数据，确保了数据在传输过程中的安全性，减少了 Cookie 被窃取的风险。

在网站开发和应用中，正确设置 Cookie 的属性也是保护 Cookie 安全的关键。服务器在设置 Cookie 时，可以设置多个属性来增强 Cookie 的安全性。设置 “HttpOnly” 属性可以防止 JavaScript 代码访问 Cookie，从而有效地防范跨站脚本攻击（XSS）。当 Cookie 设置了 “HttpOnly” 属性后，只有 HTTP 协议才能访问该 Cookie，JavaScript 无法读取和修改它，这样就大大降低了 Cookie 被窃取的风险。设置 “Secure” 属性可以确保 Cookie 只在 HTTPS 连接中被发送，防止在数据传输过程中被窃取。

当 Cookie 设置了 “Secure” 属性后，只有在使用 HTTPS 协议访问网站时，浏览器才会发送这个 Cookie；如果使用 HTTP 协议访问网站，浏览器将不会发送该 Cookie 。合理设置 Cookie 的过期时间也超级重大。尽量不要设置过长的过期时间，以减少 Cookie 信息被盗用的风险。对于一些敏感信息，如用户登录凭证等，可以设置较短的过期时间，或者在用户注销登录时及时删除相关 Cookie 。

避免在 Cookie 中存储敏感信息也是保护 Cookie 安全的重大原则。由于 Cookie 存储在用户的浏览器中，并且可能会被窃取，尽量避免在 Cookie 中存储敏感数据，如用户名、密码、银行卡号等。如果必须存储一些用户相关信息，可以对这些信息进行加密处理后再存储到 Cookie 中。使用加密算法对敏感信息进行加密，即使 Cookie 被窃取，攻击者也无法轻易获取到其中的真实内容。还可以采用其他更安全的技术来替代 Cookie 存储敏感信息，如 JSON Web Token（JWT）等。JWT 是一种基于 JSON 的开放标准，它可以在不同的系统之间安全地传输信息，并且具有自我包含、可验证和加密等特点，相比 Cookie 更加安全可靠。

前端利用插件使用 cookie

在前端开发中，操作 cookie 是一项常见的任务。虽然原生 JavaScript 提供了操作 cookie 的方法，但使用起来较为繁琐。为了更方便地管理 cookie，我们可以借助一些优秀的插件，如js-cookie和jQuery Cookie。

（一）js-cookie 插件

js-cookie是一个轻量级的 JavaScript 库，专门用于处理 cookie。它的使用超级简单，并且具有良好的兼容性。在 Vue 项目中使用js-cookie，第一需要安装该插件。打开终端，进入项目目录，执行以下命令：

npm install js-cookie -S

安装完成后，在需要使用的文件中导入js-cookie：

import Cookies from 'js-cookie'

接下来，就可以使用js-cookie提供的方法来操作 cookie 了。例如，设置一个名为username，值为John，过期时间为 7 天的 cookie：

Cookies.set('username', 'John', { expires: 7 })

获取名为username的 cookie 值：

const username = Cookies.get('username')
console.log(username) // 输出: John

删除名为username的 cookie：

Cookies.remove('username')

（二）jQuery Cookie 插件

jQuery Cookie是一个基于 jQuery 的插件，它为 jQuery 提供了简单的 cookie 操作方法。如果你已经在项目中使用了 jQuery，那么使用jQuery Cookie会超级方便。第一，需要在 HTML 文件中引入jQuery和jQuery Cookie库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js"></script>

然后，就可以使用$.cookie()方法来操作 cookie 了。例如，设置一个名为token，值为abc123，过期时间为 30 天的 cookie：

$.cookie('token', 'abc123', { expires: 30 })

获取名为token的 cookie 值：

const token = $.cookie('token')
console.log(token) // 输出: abc123

删除名为token的 cookie：

$.removeCookie('token')

js-cookie和jQuery Cookie插件都大大简化了前端对 cookie 的操作。js-cookie独立于其他库，使用方便；jQuery Cookie则与 jQuery 紧密结合，适合已经使用 jQuery 的项目。根据项目的实际情况选择合适的插件，可以提高开发效率，让我们更专注于业务逻辑的实现。

js 使用 cookie

在 JavaScript 中，我们可以直接使用document.cookie属性来操作 cookie ，不过这种原生操作方式相对繁琐，需要我们手动处理许多细节。

（一）设置 cookie

使用document.cookie设置 cookie 时，需要注意其格式。假设我们要设置一个名为username，值为John的 cookie，可以这样写：

document.cookie = "username=John";

这样设置的 cookie 是会话级别的，也就是说，当浏览器关闭时，这个 cookie 就会被删除。如果我们希望 cookie 在一段时间内有效，列如设置过期时间为 1 天，可以使用expires属性：

var d = new Date();
d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = "username=John;" + expires;

在这个例子中，我们第一创建一个Date对象，然后将其时间设置为当前时间加上 1 天的毫秒数。接着，将这个时间转换为 UTC 格式的字符串，并赋值给expires变量。最后，在设置document.cookie时，将expires属性添加进去。

我们还可以设置 cookie 的path属性，指定 cookie 的生效路径。例如，设置path=/表明在整个网站的所有路径下，这个 cookie 都生效：

document.cookie = "username=John; expires=" + expires + "; path=/";

（二）获取 cookie

获取 cookie 时，document.cookie会返回一个包含所有 cookie 的字符串，格式为cookie1=value1; cookie2=value2; cookie3=value3 。如果我们要获取特定名称的 cookie 值，就需要手动解析这个字符串。下面是一个获取指定名称 cookie 值的函数示例：

function getCookie(name) {
  var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === " ") c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
 }
 return null;
}

使用这个函数，我们可以轻松获取名为username的 cookie 值：

var username = getCookie('username');
console.log(username); // 输出: John

（三）删除 cookie

删除 cookie 的原理是将其expires属性设置为一个过去的时间。例如，要删除名为username的 cookie，可以这样做：

var d = new Date();
d.setTime(d.getTime() - (1 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = "username=; " + expires;