异常教程

JavaScript Cookie（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发中，"JavaScript Cookie" 是一个既基础又关键的技术概念。它像一位默默无闻的“数字管家”，负责在用户与网站互动时记录关键信息，例如登录状态、偏好设置或浏览历史。对于编程初学者来说，理解 Cookie 的工作原理和使用场景，能帮助他们构建更智能的动态网站；而对于中级开发者，深入掌握其高级功能与安全限制，则能进一步优化应用性能。本文将从零开始，通过案例与代码示例，系统解析 JavaScript Cookie 的核心知识点，并探讨如何在实际项目中合理应用这一技术。

一、什么是 JavaScript Cookie？

Cookie 是由服务器或客户端（如 JavaScript）生成的小型文本文件，存储在用户的浏览器中。每当浏览器向对应网站发送请求时，Cookie 的内容会自动附加到请求头中，从而实现信息的持久化存储与跨页面共享。

形象比喻：
可以把 Cookie 想象成一家餐厅提供的“会员便签”。当你第一次用餐时，服务员会记录你的偏好（例如“不加香菜”），并将这些信息写在便签上贴在你的餐盘旁。后续每次你到这家餐厅，服务员都能通过便签快速调出你的需求，而无需重复询问。

核心特性：

  • 客户端存储：数据存放在用户浏览器，而非服务器。
  • 同源策略限制：只能被创建它的域名访问。
  • 大小限制：每个 Cookie 的最大长度通常为 4KB。

二、Cookie 的基本操作：存储与读取

1. 设置 Cookie

通过 JavaScript 的 document.cookie 属性，可以轻松创建 Cookie。其语法格式为：

document.cookie = "key=value; expires=Date; path=/; domain=example.com; secure";

关键参数说明：
| 参数 | 作用 |
|--------------|----------------------------------------------------------------------|
| key=value | 必须项，键值对形式存储数据。 |
| expires | 设置 Cookie 的过期时间，格式为 UTC 时间字符串。未设置时为会话 Cookie。 |
| path | 指定 Cookie 有效的路径，默认为当前路径。 |
| domain | 指定 Cookie 有效的域名，需符合同源策略。 |
| secure | 若设置，Cookie 仅通过 HTTPS 传输。 |

示例代码：

// 设置一个有效期为 7 天的 Cookie  
const expiresDate = new Date();  
expiresDate.setDate(expiresDate.getDate() + 7);  
document.cookie = "username=JohnDoe; expires=" + expiresDate.toUTCString() + "; path=/";

2. 读取 Cookie

通过 document.cookie 可以获取所有 Cookie 的字符串，格式为 key1=value1; key2=value2。需自行解析为对象：

function getCookie(name) {  
  const value = "; " + document.cookie;  
  const parts = value.split("; " + name + "=");  
  if (parts.length == 2) return parts.pop().split(";").shift();  
  return null;  
}  

// 使用示例  
const user = getCookie("username");  
console.log(user); // 输出 "JohnDoe"

3. 删除 Cookie

通过设置过期时间为过去的日期即可删除 Cookie：

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

三、Cookie 的高级功能与注意事项

1. 多 Cookie 管理

若需存储复杂数据（如用户配置），可以：

  • 序列化对象：将 JavaScript 对象转为 JSON 字符串后存储。
  • 分隔符分隔：用特殊符号（如 |）将多个值组合成单个 Cookie。

示例：

// 存储用户配置  
const config = { theme: "dark", fontSize: "16px" };  
document.cookie = "userConfig=" + encodeURIComponent(JSON.stringify(config)) + "; path=/";  

// 读取并解析  
const configStr = getCookie("userConfig");  
if (configStr) {  
  const config = JSON.parse(decodeURIComponent(configStr));  
  console.log(config.theme); // 输出 "dark"  
}

2. 安全性与限制

  • 不要存储敏感信息：Cookie 可能被 XSS 攻击窃取，密码等数据应加密后存储。
  • HttpOnly 标志：通过服务端设置此标志，防止 JavaScript 访问 Cookie（需服务端配合）。
  • CORS 与第三方 Cookie：现代浏览器限制跨域 Cookie，默认需显式声明 SameSite 属性。

案例场景：
某电商网站在用户登录时设置 Cookie，但未启用 HttpOnly 和 Secure 标志。攻击者可能通过恶意脚本窃取用户的登录凭证，导致账户被盗。

3. 性能优化

由于 Cookie 会随每个请求自动发送，过大的 Cookie 会显著增加网络延迟。建议：

  • 按需存储：仅保留必要的信息。
  • 分段存储：将大型数据拆分为多个 Cookie，或改用 localStorage（但需注意其自身的限制）。

四、实战案例：实现主题切换功能

1. 功能需求

用户选择“深色模式”或“浅色模式”后，页面样式需持久化保存，即使刷新页面或下次访问时仍生效。

2. 实现步骤

（1）HTML 结构

<button onclick="toggleTheme()">切换主题</button>  
<div id="content"></div>

（2）JavaScript 逻辑

function toggleTheme() {  
  const currentTheme = getCookie("theme") || "light";  
  const newTheme = currentTheme === "light" ? "dark" : "light";  

  // 存储新主题  
  document.cookie = "theme=" + newTheme + "; path=/";  

  // 应用样式  
  document.body.className = newTheme;  
  document.getElementById("content").style.backgroundColor = newTheme === "dark" ? "#333" : "#fff";  
}  

// 页面加载时恢复主题  
window.onload = function() {  
  const savedTheme = getCookie("theme");  
  if (savedTheme) {  
    document.body.className = savedTheme;  
    document.getElementById("content").style.backgroundColor = savedTheme === "dark" ? "#333" : "#fff";  
  }  
};

（3）CSS 样式

body {  
  transition: background-color 0.3s;  
}  
body.dark {  
  background-color: #222;  
  color: white;  
}  
body.light {  
  background-color: white;  
  color: black;  
}

五、总结与进阶方向

通过本文，我们系统学习了 JavaScript Cookie 的基础操作、高级功能及安全注意事项，并通过主题切换案例巩固了知识。对于希望深入探索的开发者，可进一步研究以下方向：

  • 服务端 Cookie 操作：Node.js 中的 cookie-parser 中间件。
  • 替代方案对比：localStorage 与 sessionStorage 的适用场景。
  • 安全最佳实践：如何结合 HTTPS 和防篡改机制保护 Cookie 数据。

掌握 Cookie 的核心原理后，开发者能更灵活地管理用户状态、优化用户体验，同时避免常见的安全陷阱。在 Web 开发的长跑中，Cookie 将始终是值得信赖的“数字管家”之一。

最新发布

查看更多文章