1 / 1
快捷键: ← → 切换
R 旋转 F 翻转 0 重置

前端Cookie配置指南：从小白到掌握

杨宙锦
2026-01-11 20:50:27 31 阅读 · 技术科技 · 小言心前端开发工程师
原创 web cookie

一、Cookie是什么？一个生动的比喻（在这里可不是饼干的意思）

想象一下，你去一家咖啡店：

  • 第一次去，店员不知道你的喜好

  • 第二次去，店员说："我记得你！上次你点了拿铁，少糖"

  • 这是因为店员在你的会员卡上记下了你的偏好

Cookie就像这张"会员卡"，它是网站存储在你浏览器里的小纸条，用来记住你的信息。

二、Cookie能干什么？（实际用途）

1，记住登录状态​

  1. // 你登录后，网站会在你的浏览器存一个"身份证"
  2. // 下次访问时，浏览器会自动出示这个"身份证"
  3. // 网站就知道："哦，是老用户，直接进来吧！"

2，保存个性设置

  1. // 比如：
  2. // - 你选择的语言（中文/英文）
  3. // - 夜间模式还是白天模式
  4. // - 购物车里的商品

3，记录浏览行为

  1. // 网站可能会记录：
  2. // - 你看过哪些商品（用于推荐）
  3. // - 你在网站上做了什么（用于分析）

三、Cookie长什么样？

一个真实的Cookie是这样的字符串：

  1. username=张三; expires=Sat, 20 Jan 2024 12:00:00 GMT; path=/; Secure; SameSite=Lax

拆解一下：

  • username=张三：实际存储的数据

  • 后面都是"设置选项"（属性）

四、如何用JavaScript设置Cookie？

基础设置（最简单的方式：）

  1. // 就像在便利贴上写字
  2. document.cookie = "username=张三";
  3.  
  4. // 再写一张
  5. document.cookie = "theme=dark";
  6.  
  7. // 注意：不是覆盖，而是添加！
  8. // 现在你有两张"便利贴"了

完整设置推荐方式：

  1. function setCookie(name, value, daysToExpire) {
  2.     let expires = "";
  3.  
  4.     if (daysToExpire) {
  5.         const date = new Date();
  6.         date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
  7.         expires = "; expires=" + date.toUTCString();
  8.     }
  9.  
  10.     // 完整的cookie设置
  11.     document.cookie = 
  12.         name + "=" + encodeURIComponent(value) + 
  13.         expires + 
  14.         "; path=/" + 
  15.         "; Secure" +  // 只在HTTPS下传输
  16.         "; SameSite=Lax"; // 安全设置
  17. }
  18.  
  19. // 使用示例
  20. setCookie("username", "张三", 7); // 保存7天
  21. setCookie("theme", "dark", 30);   // 保存30天

五、Cookie属性详解（每个选项的作用）

1，expires或者max-age - 保质期

  1. // 方式1：指定过期日期
  2. document.cookie = "user=张三; expires=Sat, 20 Jan 2024 12:00:00 GMT";
  3.  
  4. // 方式2：指定存活秒数（更常用）
  5. document.cookie = "user=张三; max-age=604800"; // 7天=604800秒
  6.  
  7. // 如果不设置：会话Cookie，关浏览器就消失
  8. document.cookie = "temp=数据"; // 关闭浏览器就没了

2，path - 有效路径

  1. // 只在 /admin 路径下有效
  2. document.cookie = "token=abc123; path=/admin";
  3.  
  4. // 在整个网站都有效（最常用）
  5. document.cookie = "user=张三; path=/";
  6.  
  7. // 例子：
  8. // 设置 path=/shop 的Cookie
  9. // 访问 https://example.com/ → 看不到这个Cookie
  10. // 访问 https://example.com/shop → 能看到
  11. // 访问 https://example.com/shop/cart → 也能看到

3，domain - 有效域名

  1. // 只在当前域名有效（默认）
  2. document.cookie = "data=value";
  3.  
  4. // 在子域名也有效
  5. document.cookie = "data=value; domain=example.com";
  6. // 这时：shop.example.com 和 blog.example.com 都能访问
  7.  
  8. // 注意：不能设置成别人的域名！

4，secure - 安全传输

  1. // 只在HTTPS连接下传输
  2. document.cookie = "session=secret; Secure";
  3.  
  4. // 重要数据一定要加这个！
  5. // HTTP网站无法设置Secure Cookie

5，HttpOnly - 防止JS窃取

  1. // 重要！这个属性JavaScript无法设置
  2. // 只能由服务器通过HTTP响应头设置：
  3. // Set-Cookie: sessionId=abc123; HttpOnly
  4.  
  5. // 作用：JavaScript读不到这个Cookie
  6. // 防止XSS攻击窃取你的登录凭证

6，SameSite - 防跨站攻击（重点！）

  1. // 1. Strict（最严格）
  2. document.cookie = "data=value; SameSite=Strict";
  3. // 效果：从百度链接点过来，不带Cookie
  4.  
  5. // 2. Lax（推荐默认值）
  6. document.cookie = "data=value; SameSite=Lax";
  7. // 效果：从百度链接点过来，GET请求带Cookie
  8. //       提交表单POST请求，不带Cookie
  9.  
  10. // 3. None（特殊需要，必须配合Secure）
  11. document.cookie = "data=value; SameSite=None; Secure";
  12. // 效果：任何情况都带Cookie
  13. // 注意：必须同时设置Secure（需要HTTPS）

六、如何读取和删除Cookie？

读取所有Cookie

  1. function getAllCookies() {
  2.     // document.cookie返回所有Cookie的字符串
  3.     const cookieString = document.cookie;
  4.     // 例如："username=张三; theme=dark; language=zh"
  5.  
  6.     if (!cookieString) return {};
  7.  
  8.     // 转换成对象方便使用
  9.     const cookies = {};
  10.     cookieString.split(';').forEach(cookie => {
  11.         const [name, value] = cookie.trim().split('=');
  12.         cookies[name] = decodeURIComponent(value);
  13.     });
  14.  
  15.     return cookies;
  16. }
  17.  
  18. // 使用
  19. const myCookies = getAllCookies();
  20. console.log(myCookies.username); // "张三"

读取特定的Cookie

  1. function getCookie(name) {
  2.     const cookies = getAllCookies();
  3.     return cookies[name] || null;
  4. }
  5.  
  6. // 使用
  7. const theme = getCookie("theme");
  8. if (theme) {
  9.     console.log("当前主题是：" + theme);
  10. }

删除Cookie（其实就是设置它的过期时间）

  1. function deleteCookie(name) {
  2.     // 把过期时间设为过去的时间，浏览器会自动删除
  3.     document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
  4.  
  5.     // 如果要删除特定path/domain的Cookie
  6.     // document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/admin";
  7. }

七、完整示例：用户偏好设置

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Cookie示例</title>
  5.     <style>
  6.         body { transition: background 0.3s; }
  7.         .dark { background: #333; color: white; }
  8.         .light { background: white; color: black; }
  9.     </style>
  10. </head>
  11. <body>
  12.     <h1>主题选择器</h1>
  13.     <button onclick="setTheme('light')">浅色模式</button>
  14.     <button onclick="setTheme('dark')">深色模式</button>
  15.     <button onclick="clearSettings()">清除设置</button>
  16.  
  17.     <script>
  18.         // 1. 页面加载时读取Cookie
  19.         window.onload = function() {
  20.             const savedTheme = getCookie("theme");
  21.             if (savedTheme) {
  22.                 applyTheme(savedTheme);
  23.                 console.log("已恢复上次的主题：" + savedTheme);
  24.             }
  25.         };
  26.  
  27.         // 2. 设置主题并保存到Cookie
  28.         function setTheme(theme) {
  29.             // 应用到页面
  30.             applyTheme(theme);
  31.  
  32.             // 保存到Cookie，30天后过期
  33.             document.cookie = `theme=${theme}; max-age=${30*24*60*60}; path=/; SameSite=Lax`;
  34.  
  35.             console.log(`主题已设置为：${theme}，并保存30天`);
  36.         }
  37.  
  38.         function applyTheme(theme) {
  39.             document.body.className = theme;
  40.         }
  41.  
  42.         // 3. 获取Cookie的函数
  43.         function getCookie(name) {
  44.             const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  45.             return match ? decodeURIComponent(match[2]) : null;
  46.         }
  47.  
  48.         // 4. 清除设置
  49.         function clearSettings() {
  50.             deleteCookie("theme");
  51.             document.body.className = "";
  52.             console.log("设置已清除");
  53.         }
  54.  
  55.         function deleteCookie(name) {
  56.             document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
  57.         }
  58.     </script>
  59. </body>
  60. </html>

八、Cookie的限制和注意事项

1，大小限制

  1. // 每个Cookie最大 4KB
  2. // 每个域名下的Cookie总数有限制（通常50个左右）
  3. // 总Cookie大小也有限制（通常4KB-10KB）

2，安全性提醒

  1. //绝对不要这样做！
  2. document.cookie = "password=123456"; // 明文存储密码
  3. document.cookie = "creditCard=1234-5678-9012-3456";
  4.  
  5. //应该这样做
  6. document.cookie = "sessionToken=加密的令牌; Secure; HttpOnly";
  7. // 敏感信息存在服务器，浏览器只存"钥匙"

3，隐私考虑

  • Cookie可能被用于跟踪用户行为

  • 欧盟GDPR法规要求网站征得用户同意

  • 现代浏览器都有隐私设置限制第三方Cookie

九、现代替代方案

存储方式大小限制有效期特点
Cookie4KB可设置自动随请求发送，有安全风险
localStorage5-10MB永久纯本地存储，不自动发送
sessionStorage5-10MB会话标签关闭就立马消失，关闭浏览器同样也是
  1. // localStorage示例（更简单）
  2. localStorage.setItem("theme", "dark"); // 存
  3. const theme = localStorage.getItem("theme"); // 取
  4. localStorage.removeItem("theme"); // 删
  5.  
  6. // 选择建议：
  7. // 需要服务器知道的（如登录状态）→ Cookie
  8. // 纯粹本地设置（如主题）→ localStorage

十、最佳实践

1，内容安全

  • 不存敏感信息

  • 重要Cookie加HttpOnly和Secure

2，合理设置

  1. // 推荐的安全设置模板
  2. document.cookie = 
  3.     encodeURIComponent(name) + "=" + encodeURIComponent(value) +
  4.     "; max-age=" + (days * 86400) +
  5.     "; path=/" +
  6.     "; Secure" +
  7.     "; SameSite=Lax";

3，及时清理

  • 设置合理的过期时间

  • 提供退出登录功能

  • 用户清除数据时删除所有相关Cookie

最后给大家一个练习题：

试着创建一个简单的"记住用户名"功能：

  1. 登录表单输入用户名

  2. 勾选"记住我"复选框

  3. 下次打开页面自动填充用户名

  4. 提供"忘记我"按钮清除记录

记住：实践是最好的学习方式！打开浏览器的开发者工具（F12），在Console面板亲自试试这些代码，观察Application面板中的Cookie变化。

温故知新：

  • Cookie是浏览器存储的小数据（最大4KB）

  • 用于身份验证、个性化等

  • 必须注意安全性（Secure, HttpOnly, SameSite）

  • 现代开发中，考虑是否需要Cookie，还是用localStorage

已经是最后一篇了 →
返回顶部

    • 提示