前端Cookie配置指南：从小白到掌握
一、Cookie是什么？一个生动的比喻（在这里可不是饼干的意思） 想象一下，你去一家咖啡店：
第一次去，店员不知道你的喜好
第二次去，店员说："我记得你！上次你点了拿铁，少糖"
这是因为店员在你的会员卡上记下了你的偏好
Cookie就像这张"会员卡"，它是网站存储在你浏览器里的小纸条，用来记住你的信息。
二、Cookie能干什么？（实际用途） 1，记住登录状态
// 你登录后，网站会在你的浏览器存一个"身份证" // 下次访问时，浏览器会自动出示这个"身份证" // 网站就知道："哦，是老用户，直接进来吧！" 2，保存个性设置
// 比如： // - 你选择的语言（中文/英文） // - 夜间模式还是白天模式 // - 购物车里的商品 3，记录浏览行为
// 网站可能会记录： // - 你看过哪些商品（用于推荐） // - 你在网站上做了什么（用于分析） 三、Cookie长什么样？ 一个真实的Cookie是这样的字符串：
username=张三; expires=Sat, 20 Jan 2024 12:00:00 GMT; path=/; Secure; SameSite=Lax 拆解一下：
username=张三：实际存储的数据
后面都是"设置选项"（属性）
四、如何用JavaScript设置Cookie？ 基础设置（最简单的方式：）
// 就像在便利贴上写字 document.cookie = "username=张三";
// 再写一张 document.cookie = "theme=dark";
// 注意：不是覆盖，而是添加！ // 现在你有两张"便利贴"了 完整设置推荐方式：
function setCookie(name, value, daysToExpire) { let expires = "";
▼text复制代码if (daysToExpire) { const date = new Date(); date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } // 完整的cookie设置 document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/" + "; Secure" + // 只在HTTPS下传输 "; SameSite=Lax"; // 安全设置
}
// 使用示例 setCookie("username", "张三", 7); // 保存7天 setCookie("theme", "dark", 30); // 保存30天 五、Cookie属性详解（每个选项的作用） 1，expires或者max-age - 保质期
// 方式1：指定过期日期 document.cookie = "user=张三; expires=Sat, 20 Jan 2024 12:00:00 GMT";
// 方式2：指定存活秒数（更常用） document.cookie = "user=张三; max-age=604800"; // 7天=604800秒
// 如果不设置：会话Cookie，关浏览器就消失 document.cookie = "temp=数据"; // 关闭浏览器就没了 2，path - 有效路径
// 只在 /admin 路径下有效 document.cookie = "token=abc123; path=/admin";
// 在整个网站都有效（最常用） document.cookie = "user=张三; path=/";
// 例子： // 设置 path=/shop 的Cookie // 访问 https://example.com/ → 看不到这个Cookie // 访问 https://example.com/shop → 能看到 // 访问 https://example.com/shop/cart → 也能看到 3，domain - 有效域名
// 只在当前域名有效（默认） document.cookie = "data=value";
// 在子域名也有效 document.cookie = "data=value; domain=example.com"; // 这时：shop.example.com 和 blog.example.com 都能访问
// 注意：不能设置成别人的域名！ 4，secure - 安全传输
// 只在HTTPS连接下传输 document.cookie = "session=secret; Secure";
// 重要数据一定要加这个！ // HTTP网站无法设置Secure Cookie 5，HttpOnly - 防止JS窃取
// 重要！这个属性JavaScript无法设置 // 只能由服务器通过HTTP响应头设置： // Set-Cookie: sessionId=abc123; HttpOnly
// 作用：JavaScript读不到这个Cookie // 防止XSS攻击窃取你的登录凭证 6，SameSite - 防跨站攻击（重点！）
// 1. Strict（最严格） document.cookie = "data=value; SameSite=Strict"; // 效果：从百度链接点过来，不带Cookie
// 2. Lax（推荐默认值） document.cookie = "data=value; SameSite=Lax"; // 效果：从百度链接点过来，GET请求带Cookie // 提交表单POST请求，不带Cookie
// 3. None（特殊需要，必须配合Secure） document.cookie = "data=value; SameSite=None; Secure"; // 效果：任何情况都带Cookie // 注意：必须同时设置Secure（需要HTTPS） 六、如何读取和删除Cookie？ 读取所有Cookie
function getAllCookies() { // document.cookie返回所有Cookie的字符串 const cookieString = document.cookie; // 例如："username=张三; theme=dark; language=zh"
▼text复制代码if (!cookieString) return {}; // 转换成对象方便使用 const cookies = {}; cookieString.split(';').forEach(cookie => { const [name, value] = cookie.trim().split('='); cookies[name] = decodeURIComponent(value); }); return cookies;
}
// 使用 const myCookies = getAllCookies(); console.log(myCookies.username); // "张三" 读取特定的Cookie
function getCookie(name) { const cookies = getAllCookies(); return cookies[name] || null; }
// 使用 const theme = getCookie("theme"); if (theme) { console.log("当前主题是：" + theme); } 删除Cookie（其实就是设置它的过期时间）
function deleteCookie(name) { // 把过期时间设为过去的时间，浏览器会自动删除 document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
▼text复制代码// 如果要删除特定path/domain的Cookie // document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/admin";
} 七、完整示例：用户偏好设置
Cookie示例 body { transition: background 0.3s; } .dark { background: #333; color: white; } .light { background: white; color: black; }主题选择器
浅色模式 深色模式 清除设置八、Cookie的限制和注意事项 1，大小限制▼text复制代码<script> // 1. 页面加载时读取Cookie window.onload = function() { const savedTheme = getCookie("theme"); if (savedTheme) { applyTheme(savedTheme); console.log("已恢复上次的主题：" + savedTheme); } }; // 2. 设置主题并保存到Cookie function setTheme(theme) { // 应用到页面 applyTheme(theme); // 保存到Cookie，30天后过期 document.cookie = `theme=${theme}; max-age=${30*24*60*60}; path=/; SameSite=Lax`; console.log(`主题已设置为：${theme}，并保存30天`); } function applyTheme(theme) { document.body.className = theme; } // 3. 获取Cookie的函数 function getCookie(name) { const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); return match ? decodeURIComponent(match[2]) : null; } // 4. 清除设置 function clearSettings() { deleteCookie("theme"); document.body.className = ""; console.log("设置已清除"); } function deleteCookie(name) { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; } </script>
// 每个Cookie最大 4KB // 每个域名下的Cookie总数有限制（通常50个左右） // 总Cookie大小也有限制（通常4KB-10KB） 2，安全性提醒
//绝对不要这样做！ document.cookie = "password=123456"; // 明文存储密码 document.cookie = "creditCard=1234-5678-9012-3456";
//应该这样做 document.cookie = "sessionToken=加密的令牌; Secure; HttpOnly"; // 敏感信息存在服务器，浏览器只存"钥匙" 3，隐私考虑
Cookie可能被用于跟踪用户行为
欧盟GDPR法规要求网站征得用户同意
现代浏览器都有隐私设置限制第三方Cookie
九、现代替代方案 存储方式 大小限制 有效期 特点 Cookie 4KB 可设置 自动随请求发送，有安全风险 localStorage 5-10MB 永久 纯本地存储，不自动发送 sessionStorage 5-10MB 会话 标签关闭就立马消失，关闭浏览器同样也是 // localStorage示例（更简单） localStorage.setItem("theme", "dark"); // 存 const theme = localStorage.getItem("theme"); // 取 localStorage.removeItem("theme"); // 删
// 选择建议： // 需要服务器知道的（如登录状态）→ Cookie // 纯粹本地设置（如主题）→ localStorage 十、最佳实践 1，内容安全
不存敏感信息
重要Cookie加HttpOnly和Secure
2，合理设置
// 推荐的安全设置模板 document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; max-age=" + (days * 86400) + "; path=/" + "; Secure" + "; SameSite=Lax"; 3，及时清理
设置合理的过期时间
提供退出登录功能
用户清除数据时删除所有相关Cookie
最后给大家一个练习题： 试着创建一个简单的"记住用户名"功能： 登录表单输入用户名
勾选"记住我"复选框
下次打开页面自动填充用户名
提供"忘记我"按钮清除记录
记住：实践是最好的学习方式！打开浏览器的开发者工具（F12），在Console面板亲自试试这些代码，观察Application面板中的Cookie变化。
温故知新： Cookie是浏览器存储的小数据（最大4KB）
用于身份验证、个性化等
必须注意安全性（Secure, HttpOnly, SameSite）
现代开发中，考虑是否需要Cookie，还是用localStorage
