如何在 JavaScript 程序中创建 cookie

在JavaScript程序中创建cookie的方式是通过document.cookie属性、设置有效期以及路径。要设置一个简单的cookie，您只需将一个字符串赋给document.cookie，该字符串包含了要设置的cookie的键值对。例如，document.cookie = "username=John Doe";会创建一个名为username，值为John Doe的cookie。为使cookie安全有效，通常还需要设置过期时间和路径，以确保cookie只在特定条件下发送。例如，document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";将创建一个在指定日期过期，并且只对网站根目录有效的cookie。

要详细描述的点是设置有效期。有效期通过expires属性或max-age属性来设置。expires属性通过具体的过期时间来设置cookie的存活期限，它是一个UTC格式的日期。如果没有指定过期时间，那么创建的cookie即为会话cookie，它会在用户关闭浏览器后消失。max-age属性则通过设置秒数来定义cookie的生存时间，它从cookie被创建或修改的时候开始计时。例如，max-age=3600表示cookie将在创建或修改后的一个小时后过期。

一、UNDERSTANDING COOKIES

Cookie是一种在客户端存储小量信息的机制。它通常用于保存用户的偏好设置、购物车中的商品、标识用户的会话等。创建cookie时，服务器通过HTTP响应的Set-Cookie头部将cookie信息发送给浏览器，浏览器则根据接收到的信息存储cookie。当后续对服务器发起请求时，浏览器会根据规则将存储的cookie通过HTTP请求的Cookie头部发送回服务器。

Cookie的可访问性受范围限制，包括域、路径、过期时间等。域和路径的设定意在安全地限制cookie的发送范围，以防止信息被非预期的接收方获取。为了增强安全性，还有Secure属性和HttpOnly属性，Secure属性要求cookie只通过HTTPS传输，而HttpOnly属性禁止JavaScript通过document.cookie访问cookie。

二、CREATING COOKIES IN JAVASCRIPT

在JavaScript中创建cookie的方法简单直接。在浏览器中，我们可以通过写入document.cookie属性来创建新的cookie或更新现有的cookie。这个属性看起来像是一个字符串，但它其实代表当前页面的所有可访问cookie，并且可以通过特定的格式来设置。

创建一个基本cookie的步骤是将键值对形式的字符串赋值给document.cookie。例如，要追踪用户的首选语言，可以如下设置：

document.cookie = "preferredLanguage=en";

以上代码会创建一个会话cookie，也就是说，这个cookie会在用户的浏览器会话结束时自动过期。若要让cookie在特定日期后过期，可以添加expires属性：

document.cookie = "preferredLanguage=en; expires=Fri, 31 Dec 2023 23:59:59 GMT";

如果要依据时间长度而非具体日期来设置cookie的过期时间，可以使用max-age属性。下面的代码会创建一个在24小时后过期的cookie：

document.cookie = "preferredLanguage=en; max-age=86400";

域和路径的设置是创建cookie时要考虑的重要部分，它们定义了cookie的发送范围。域用于限制cookie的发送到特定的域名下，而路径则限制了cookie发送到域下的特定路径。设置路径为“/”意味着cookie在整个域名下都是可访问的。

document.cookie = "preferredLanguage=en; path=/; max-age=86400";

对于安全性较高的应用，你还可能需要启用Secure属性和HttpOnly属性：

document.cookie = "userId=abc123; secure; httponly";

Secure属性确保了cookie只能通过加密的HTTPS连接发送，而HttpOnly属性限制了JavaScript的访问权限，为防止跨站脚本攻击提供了一层保护。这意味着通过document.cookie将无法读取或修改那些标记为HttpOnly的cookie。

三、MANAGING COOKIE LIFETIMES

管理cookie的生命周期是维护用户体验的关键。在用户不需要某些信息时，或者信息已经过期时确保cookie能够被适时清除是很重要的。过期时间能够告诉浏览器何时需要删除cookie，确保不会无限期地保持用户数据。

当设定cookie的过期时间时，要保证使用的是全球统一的时间格式UTC或者格林威治时间(GMT)，以便浏览器可以正确地解析。

var inOneWeek = new Date();

inOneWeek.setTime(inOneWeek.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = "sessionToken=xyz123; expires=" + inOneWeek.toUTCString();

上述代码创建了一个在一周后过期的cookie。通过构造一个新的Date对象并设置其时间，可以非常精确地控制cookie的过期时间。

如果你需要删除一个cookie，你可以通过将过期时间设置为过去的时间来让浏览器清除该cookie：

document.cookie = "sessionToken=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

这种方法实际上并不会立即从浏览器中删除cookie，但它会在浏览器的下一个请求中排除该cookie，并且该cookie将在那之前不再被视为有效。

四、SECURING COOKIES

安全地处理cookie是防止信息泄露和确保Web应用安全不可缺少的一部分。主要的安全措施包括标记cookie为Secure和HttpOnly。

标记cookie为Secure是以确保cookie信息只能通过HTTPS而不是HTTP发送。尽管这不会防止所有可能的攻击，它可以减少数据在传输过程中被拦截的机会。要创建一个secure cookie，可以这样设置：

document.cookie = "userAuthToken=abc1234; secure";

采用HttpOnly标记意味着cookie不会暴露给客户端的JavaScript代码，能在很大程度上防范跨站点脚本攻击(XSS)。这是由于即使攻击者可以注入恶意脚本到网站页面上，由于HttpOnly属性的存在，这些脚本也无法访问到cookie的值。

此外，还有一个SameSite属性可以用来进一步增强cookie的安全性，它限制了cookie跨站点请求时的发送。这有两种值，分别是Strict和Lax：Strict几乎完全禁止跨站请求中携带cookie，而Lax允许在某些情况下发送cookie，如用户从外部网站通过链接导航到网站时。

五、LEVERAGING COOKIES FOR STATE MANAGEMENT

在Web应用中，cookie被广泛用于状态管理。保存用户的登录状态、个性化设置和跟踪用户在网站上的行为都是cookie的常见用途。

跟踪用户会话是最常见的用例之一。通过在用户登录时创建cookie，并在接下来的所有请求中检查该cookie，应用可以识别出用户并提供个性化的体验。通常，会话cookie不会设置过期时间，所以它们只会在浏览器会话活跃时存在。

document.cookie = "sessionId=xyz456; path=/; httponly";

保存用户偏好对于创建更加个性化的用户体验同样重要。如果用户可以选择网站的主题或语言偏好，那么这些信息可以存储在cookie中，当用户下次访问网站时，可以即刻应用这些偏好设置。

document.cookie = "theme=dark; path=/; max-age=604800";

document.cookie = "language=en; path=/; max-age=604800";

在这两个例子中，我们使用了一个相对较长的过期时间，为用户提供了一个持久的偏好设置。

六、BEST PRACTICES FOR COOKIE USAGE

在使用cookie时，遵循一定的最佳实践可以帮助增强用户体验和数据安全。首先，尽量减少cookie的大小和数量，因为每个HTTP请求都会包含cookie，过多或过大的cookie将增加请求的负载和延迟。

其次，只在必要时使用cookie，并且要确保为cookie设置正确的过期时间或有效期。这有助于避免存储无用或过时的信息，并保持用户的隐私。

对cookie数据进行加密也是一个好的实践，特别是对于存储敏感信息的cookie。虽然HttpOnly和Secure属性在某种程度上提供了保护，但加密可以提供另一层安全保障，确保即使数据被拦截，也不会立即暴露其内容。

// 使用自定义的加密函数对cookie值进行加密

var encryptedValue = encryptFunction("sensitiveData123");
document.cookie = "userSettings=" + encryptedValue + "; path=/; secure; httponly";

此外，正如前面提到的限制cookie的作用域和生效路径，以及使用Secure和HttpOnly标志，都是确保cookie安全的重要步骤。

七、CONCLUSION

JavaScript中创建和管理cookie是一项简单却极其重要的任务。它不仅涉及到提供良好的用户体验，也关系到维护网站的安全性。理解cookie的工作原理并遵循最佳实践可以确保你的Web应用不仅能够存储必要的数据，也能够保护用户的隐私并预防潜在的安全风险。实现上述策略，你的网站可以高效、安全地利用cookies来增强用户体验和提供个性化服务。

相关问答FAQs：

问题一：在 JavaScript 中如何创建和读取 cookie？

回答：要在 JavaScript 程序中创建 cookie，可以使用 document.cookie 对象。通过设置 document.cookie 的值，可以创建一个新的 cookie。例如，要创建一个名为 "username" 的 cookie，可以使用以下代码：

document.cookie = "username=John Doe";

要读取 cookie 的值，可以使用 document.cookie，并将其分割成单个 cookie。通过迭代 cookie 列表，可以找到特定的 cookie。例如，要读取名为 "username" 的 cookie 的值，可以使用以下代码：

var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
  var cookie = cookies[i].trim();
  if (cookie.indexOf("username=") === 0) {
    var username = cookie.substring("username=".length, cookie.length);
    console.log(username);
    break;
  }
}

问题二：如何设置 cookie 的过期时间？

回答：可以通过在创建 cookie 时设置它的过期时间来让 cookie 在指定时间后过期。要设置 cookie 的过期时间，可以在创建 cookie 时为其添加一个 expires 属性。例如，要将 cookie 的过期时间设置为 7 天后，可以使用以下代码：

var date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 天后的时间
document.cookie = "username=John Doe; expires=" + date.toUTCString();

这将使名为 "username" 的 cookie 在 7 天后过期。请注意，过期时间是一个绝对时间，浏览器会根据本地时间判断 cookie 是否过期。

问题三：如何删除一个 cookie？

回答：要删除一个 cookie，可以通过将其过期时间设置为过去的时间来实现。例如，要删除名为 "username" 的 cookie，可以使用以下代码：

var date = new Date();
date.setTime(date.getTime() - 1); // 过去的时间
document.cookie = "username=; expires=" + date.toUTCString();

这将使名为 "username" 的 cookie 立即过期，从而删除它。请注意，必须将过去的时间设置为过去，以确保 cookie 被删除。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。