深入理解JavaScript Cookie：从基础到实战
什么是Cookie？
Cookie这个概念，说白了就是服务器留在你浏览器里的一小段“便签纸”。当你浏览网站时，服务器会通过浏览器在你的电脑上存储一些信息，这些信息就是Cookie。
我经常把Cookie比作商场的会员卡。你第一次去商场，前台给你一张卡（服务器设置Cookie），卡上记录着你的信息。下次再来，你出示这张卡（浏览器发送Cookie），服务员就知道你是谁，喜欢买什么东西。
Cookie本质上就是一段字符串，以“名字=值”的形式存在，多个这样的键值对之间用分号隔开。它最重要的作用是维持用户的状态，让网站在不同页面之间记住你。
Cookie的工作原理
这里得先理解一个基础概念：HTTP协议是“无状态”的。什么叫无状态？就是每一次用户向服务器发送请求，服务器都会把它当作一个全新的请求，就像第一次访问一样——哪怕你前一秒刚访问过。
这就有意思了：没有Cookie的时候，你每点一个链接，网站就不认识你了，你得重新登录。有了Cookie，网站就能记住你是谁。
为什么服务器能通过Cookie识别用户？因为每次浏览器发起请求，只要符合规则（域名、路径、有效期等），都会自动把对应的Cookie塞进请求头里发给服务器。服务器一看到Cookie里的信息，就知道“哦，是老张来了”。
JavaScript中的Cookie操作
在JavaScript里操作Cookie，全靠document.cookie这个属性。它既是获取器，又是设置器，用起来很有意思。
创建一个Cookie
最简单的Cookie创建语法：
document.cookie = "username=代码号学习编程";
就这么简单？是的，但这里有个坑——这样创建的Cookie是会话级别的，浏览器关了它就没了。而且它默认只对当前路径有效。
读取Cookie
读取同样用document.cookie：
console.log(document.cookie);
// 输出: "username=代码号学习编程"
但是你会发现，它返回的是所有符合当前路径的Cookie拼接成的字符串，比如"username=代码号学习编程; theme=dark; language=zh-CN"。自己解析这个字符串，是我早期做前端时最烦的事情之一。
给Cookie设置过期时间
真正在项目中，很少有人用上面那种简单写法，因为那根本存不住。我们需要给Cookie加上过期时间：
// 设置7天后过期的Cookie
function setCookieWithExpiry(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
setCookieWithExpiry("username", "代码号学习编程", 7);
这里我踩过坑：如果不指定path=/，这个Cookie只在当前路径下有效。比如你在https://example.com/page1设置Cookie，在https://example.com/page2是拿不到的。
封装一个实用的Cookie操作工具
看了一些教程，讲完基础就没了。我来分享一个我自己在项目中用了多年的Cookie工具函数：
// Cookie操作工具箱 - 代码号学习编程实战经验
const CookieUtil = {
// 设置Cookie
set: function(name, value, days, path = '/', domain = '', secure = false) {
let cookieStr = name + "=" + encodeURIComponent(value);
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
cookieStr += "; expires=" + date.toUTCString();
}
cookieStr += "; path=" + path;
if (domain) {
cookieStr += "; domain=" + domain;
}
if (secure) {
cookieStr += "; secure";
}
document.cookie = cookieStr;
},
// 获取指定Cookie的值
get: function(name) {
const cookies = document.cookie.split('; ');
for (let i = 0; i < cookies.length; i++) {
const parts = cookies[i].split('=');
if (parts[0] === name) {
return decodeURIComponent(parts[1]);
}
}
return null;
},
// 删除Cookie
delete: function(name, path = '/') {
this.set(name, '', -1, path);
}
};
// 使用示例
CookieUtil.set('user_id', '10086', 7); // 7天有效
console.log(CookieUtil.get('user_id')); // 输出: 10086
CookieUtil.delete('user_id'); // 立即删除
为什么要用encodeURIComponent？因为Cookie的值不能包含分号、逗号、空格等特殊字符。这个细节很多新手都不知道，导致存储复杂数据时各种报错。
实战示例：记住用户的主题偏好
下面这个例子是我在做一个后台管理系统时的真实需求。用户可以选择自己喜欢的主题颜色，下次访问时自动应用。
<!DOCTYPE html>
<html>
<head>
<title>Cookie主题记忆 - 代码号学习编程</title>
</head>
<body>
<div style="padding: 40px;">
<h2>选择你喜欢的主题颜色</h2>
<select id="themeSelector" onchange="changeTheme()">
<option value="">请选择颜色</option>
<option value="#fff3cd">米黄颜色</option>
<option value="#d4edda">浅绿色</option>
<option value="#cce5ff">浅蓝色</option>
<option value="#f8d7da">浅红色</option>
</select>
<p style="margin-top: 30px; color: #666;">
提示：选择后刷新页面，你的选择会被记住
</p>
</div>
<script>
// 页面加载时读取Cookie，恢复用户上次的选择
window.onload = function() {
const savedColor = getCookie('theme_color');
if (savedColor) {
document.body.style.backgroundColor = savedColor;
document.getElementById('themeSelector').value = savedColor;
}
};
// 改变主题并保存到Cookie
function changeTheme() {
const selector = document.getElementById('themeSelector');
const color = selector.value;
if (!color) return;
// 应用主题
document.body.style.backgroundColor = color;
// 保存到Cookie，有效期为30天
setCookie('theme_color', color, 30);
// 简单反馈
console.log('主题已保存，30天内有效');
}
// Cookie设置函数
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
// Cookie获取函数
function getCookie(name) {
const cookieName = name + "=";
const cookies = document.cookie.split(';');
for(let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
if (cookie.indexOf(cookieName) === 0) {
return cookie.substring(cookieName.length, cookie.length);
}
}
return null;
}
</script>
</body>
</html>
这个例子的关键点在于：用户的选择被保存了30天。30天内，不管用户关掉浏览器还是重启电脑，再次访问这个页面，主题颜色都会被恢复。这才是Cookie的真正价值——持久化用户偏好。
Cookie的安全性与限制
在开发中，有几个关于Cookie的要点我觉得必须说清楚：
1. HttpOnly标记
如果Cookie设置了HttpOnly，JavaScript就无法通过document.cookie读取了。这主要是为了防止XSS攻击窃取Cookie。敏感信息（比如登录凭证）应该用HttpOnly。
2. Secure标记
只允许HTTPS协议传输Cookie。如果你的网站用了HTTPS，应该给重要Cookie加上这个标记。
3. SameSite属性
这个属性用来防止CSRF攻击。取值可以是Strict、Lax或None。Lax是浏览器的默认值，允许在导航到目标网站的GET请求中携带Cookie，但限制POST请求。
4. 大小限制
一个Cookie的大小限制在4KB左右，单个域名下的Cookie总数也有限制（不同浏览器略有差异，一般20-50个）。别想着往Cookie里存大数据。
我的一点建议
根据我这几年踩过的坑，关于Cookie的使用我有几点想分享：
什么时候用Cookie？ 适合存储用户偏好、非敏感的状态信息。比如主题颜色、商品浏览记录、上次访问时间等。
什么时候别用Cookie？ 存储购物车（商品多了会超限）、敏感信息（如密码、号）、大量数据（超过4KB）。
替代方案？
-
需要存大量数据：用localStorage（5-10MB）
-
只需会话级存储：用sessionStorage
-
敏感信息：只能靠服务器session，前端只存sessionId
-
跨域共享状态：现在更推荐用JWT存在内存或localStorage里
Cookie虽然技术不新，但依然是Web开发中不可绕过的基础知识。它解决了HTTP无状态的核心问题，让网站能够记住用户。通过JavaScript操作Cookie，可以实现丰富的用户体验，让用户每次回来都有“被记住”的感觉。
关键知识点：
-
用document.cookie读写Cookie
-
设置expires来控制有效期
-
指定path控制作用域
-
注意安全属性：HttpOnly、Secure、SameSite
-
封装工具函数避免重复劳动
