Skip to Content

面试导航 - 程序员面试题库大全 | 前端后端面试真题 | 面试

JavascriptCookie

Cookie 是浏览器和服务器之间传递小型数据的一种机制。它通常用于存储客户端（如浏览器）的一些信息，这些信息会在随后的请求中自动发送给服务器，帮助服务器记住用户的状态或者行为。例如，可以用 Cookie 记录用户的登录状态、购物车内容等。

Cookie 在 HTTP 中的作用

HTTP 协议是 无状态 的，这意味着每个请求和响应之间是独立的，服务器不会“记住”前一个请求的信息。为了弥补这个缺点，Cookie 应运而生，它能够在客户端存储一些信息，以便在后续的 HTTP 请求中传递给服务器，保持会话状态。

在 HTTP 请求和响应中，Cookie 的使用主要通过 HTTP 头部来进行。我们分为两个方向来看：

  1. 服务器设置 Cookie：当服务器希望在浏览器中存储一些信息时，它会通过 HTTP 响应头中的 Set-Cookie 字段来设置 Cookie。例如：

    HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: userId=12345; Expires=Thu, 01 Jan 2026 00:00:00 GMT; Path=/

    这意味着服务器要求浏览器将一个名为 userId 的 Cookie 存储在本地，值为 12345，并且这个 Cookie 会在 2026 年 1 月 1 日过期。Path 指定了该 Cookie 适用的 URL 路径范围。

  2. 客户端发送 Cookie：当浏览器向服务器发送请求时，浏览器会自动将存储的 Cookie 通过 Cookie 头发送给服务器。例如：

    GET /index.html HTTP/1.1
Host: www.example.com
Cookie: userId=12345

    服务器可以通过接收到的 Cookie 来识别客户端，从而进行一些状态管理操作（如保持登录状态、用户设置等）。

Cookie 的生命周期

  • 会话 Cookie：没有设置 Expires 或 Max-Age 的 Cookie 是会话 Cookie，它仅在当前浏览器会话有效，浏览器关闭时会自动删除。
  • 持久化 Cookie：如果设置了 Expires 或 Max-Age，则该 Cookie 是持久化的，直到指定的时间点才会过期。

Cookie 在 JavaScript 中的使用

JavaScript 提供了 document.cookie 属性来读写 Cookie，但它有一些限制。例如，无法直接通过 JavaScript 删除 Cookie，也无法获取 Cookie 的详细属性（如 Expires、Secure 等）。

##设置 Cookie

可以通过 document.cookie 来设置 Cookie。基本语法如下：

document.cookie = 'name=value; expires=expiration_date; path=path; domain=domain; secure';

  • name=value：Cookie 的键值对。

  • expires：指定过期时间，必须是有效的 UTC 格式。如果不设置，则默认为会话 Cookie。

  • path：指定路径，默认为当前页面路径。

  • domain：指定 Cookie 的有效域名。

  • secure：表示该 Cookie 只通过 HTTPS 协议发送。

例如，设置一个名为 username 的 Cookie，并且设置过期时间为 7 天后：

const expireDate = new Date();
expireDate.setTime(expireDate.getTime() + 7 * 24 * 60 * 60 * 1000); // 设置7天后的过期时间
document.cookie = 'username=JohnDoe; expires=' + expireDate.toUTCString(); // 设置 Cookie

通过 document.cookie 可以读取当前页面的所有 Cookie，返回一个字符串，格式为：name=value; name2=value2;。你需要解析该字符串来获取具体的 Cookie 值。

const cookies = document.cookie; // 获取所有 Cookie
console.log(cookies); // 输出: "username=JohnDoe; theme=dark"
 
function getCookie(name) {
  const cookieArr = document.cookie.split(';'); // 拆分 Cookie 字符串
  for (let i = 0; i < cookieArr.length; i++) {
    const cookie = cookieArr[i].trim(); // 去除空格
    if (cookie.startsWith(name + '=')) {
      return cookie.substring(name.length + 1); // 返回 Cookie 的值
    }
  }
  return null; // 如果没有找到 Cookie，返回 null
}
 
const username = getCookie('username');
console.log(username); // 输出: "JohnDoe"

通过设置 Cookie 的 expires 为一个过去的时间，来删除它。

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

Cookie 的安全性

Cookie 在传输过程中可能面临一些安全风险，特别是 跨站脚本攻击（XSS） 和 跨站请求伪造（CSRF）。为了提高 Cookie 的安全性，现代浏览器和服务器提供了以下机制：

  • HttpOnly：如果设置了 HttpOnly 标志，该 Cookie 不能被 JavaScript 访问，避免 XSS 攻击窃取 Cookie 中的敏感信息。

    Set-Cookie: sessionId=abc123; HttpOnly;

  • Secure：如果设置了 Secure 标志，Cookie 只能通过 HTTPS 连接发送，避免在 HTTP 连接中泄漏。

    Set-Cookie: sessionId=abc123; Secure;

  • SameSite：SameSite 属性可以防止跨站请求伪造攻击。它有三种值：

    • Strict：严格限制，只有在相同站点内的请求中才会发送 Cookie。

    • Lax：宽松限制，允许部分跨站请求（如通过链接跳转）。

    • None：没有限制，允许跨站请求发送 Cookie，但需要同时设置 Secure。

    Set-Cookie: sessionId=abc123; SameSite=Strict;

cookie 的缺点

Cookie 是 Web 开发中用于存储少量数据的常见机制，它可以让客户端和服务器之间共享信息，保持会话状态、存储用户偏好等。然而，Cookie 也有一些 缺点 和 限制，在实际开发中可能会带来一定的挑战和隐患。以下是 Cookie 的一些主要缺点和限制，详细讲解如下：

  1. 存储空间限制：Cookie 具有 存储空间限制，每个 Cookie 通常只有 4 KB 的大小限制。这意味着你只能在 Cookie 中存储少量的数据，如用户标识符、会话 ID 等。对于需要存储较大数据量的应用来说，Cookie 不适用。

  2. 性能问题：每次浏览器向服务器发送 HTTP 请求时，浏览器会自动携带相关的 Cookie。如果页面有大量的 Cookie 数据，每次请求都需要附带这些数据，这会导致请求头变得非常大，影响网络性能和响应速度。

  3. 安全性问题：Cookie 会在客户端存储一些信息，因此容易受到各种安全攻击，尤其是 跨站脚本攻击（XSS） 和 跨站请求伪造（CSRF）。

    解决方案在前面的内容中提到了

  4. 由于 Cookie 经常用于 跟踪用户行为，比如记录用户浏览的网页、行为模式等，它被广泛应用于广告投放和分析工具中。虽然这些数据可以帮助优化网站和广告，但它们也可能引发 隐私问题，尤其是在 第三方 Cookie 被广泛使用的情况下。

  5. 跨域问题：Cookie 受 同源策略 的限制，这意味着只有在 相同的域名 下才会发送和接收 Cookie。对于 多子域 或者 跨域应用，这种限制可能会造成麻烦。可以通过设置 Domain 属性来让 Cookie 在不同的子域之间共享。

    document.cookie = 'userId=12345; domain=.example.com; path=/';

  6. 浏览器限制和兼容性问题：不同的浏览器对 Cookie 的支持和行为可能有所不同，尤其是对于 第三方 Cookie 的处理。例如，一些浏览器（如 Safari）会自动阻止第三方 Cookie，或者对 SameSite 属性有不同的实现。

    对于不支持某些功能的浏览器，可以使用 JavaScript Polyfill 来提供一些支持。

  7. 用户控制不够灵活虽然浏览器允许用户禁用 Cookie，但对于普通用户来说，控制 Cookie 的存储和使用较为有限。用户只能选择启用或禁用所有 Cookie，而不能选择性地管理哪些 Cookie 应该存储，哪些不该存储。

总结

Cookie 是一种用于存储客户端信息的小型数据，通常用于保持用户会话、保存用户偏好设置或跟踪用户行为。它通过 HTTP 头部在客户端与服务器之间传递，可以是 会话 Cookie（在浏览器会话期间有效）或 持久 Cookie（有明确的过期时间）。虽然 Cookie 使用广泛，但它也存在一些缺点，如存储空间有限、性能问题、安全性隐患、隐私问题和跨域限制等。因此，在使用 Cookie 时，需要考虑适当的安全措施并合理管理其生命周期。

最后更新于:
base64原理LocalStorage
Copyright © 2025Moment版权所有粤ICP备2025376666