在前端开发中，Cookie 是一种常见的存储用户信息的方式。设置带有过期时间的 Cookie，可以让我们更好地控制用户信息的有效期，从而提高网站的安全性和可用性。本文将介绍如何使用 JavaScript 设置带有过期时间的 Cookie。
什么是 Cookie？
Cookie 是一种由服务器发送给浏览器并存储在本地计算机上的小型文本文件。当用户再次访问同一网站时，浏览器会将该 Cookie 发送回服务器，从而允许服务器识别该用户并保存相关信息。因此，Cookie 可以用于记录用户的登录状态、购物车内容等。
如何设置 Cookie？
在 JavaScript 中，可以使用 document.cookie 属性来设置和读取 Cookie。该属性返回一个字符串，其中包含所有当前设置的 Cookie。
下面是设置一个名为 mycookie 值为 Hello World! 的 Cookie 的代码：
--------------- - --------------- --------
但是，这样设置的 Cookie 是没有过期时间的，也就是说只要用户不清除浏览器缓存，该 Cookie 就会一直存在。如果我们想让该 Cookie 在一定时间后自动删除，就需要设置它的过期时间。
设置 Cookie 的过期时间
在 JavaScript 中，可以通过在 Cookie 字符串中添加 expires 属性来设置 Cookie 的过期时间。例如，要将 Cookie 的过期时间设置为 1 小时后，可以使用以下代码：
--- ---- - --- ------- --------------------------- - -- - -- - -- - ------- --------------- - --------------- ------- --------- - -------------------
在上面的代码中，首先创建了一个 JavaScript Date 对象，并设置其时间为当前时间加上 1 小时。然后，我们将该对象转换为 UTC 格式的字符串，并将其添加到 Cookie 字符串中。
需要注意的是，expires 属性的值必须是 UTC 格式的字符串，否则浏览器可能无法正确解析该值。因此，我们需要使用 toUTCString() 方法将 JavaScript Date 对象转换为 UTC 格式的字符串。
示例代码
以下是一个完整的示例代码，用于设置带有过期时间的 Cookie：
-- -- ------ --- -------- --------------- ------ ------ - --- ---- - --- ------- --------------------------- - ------ - -- - -- - ------- --- ------- - ---------- - ------------------- --------------- - ---- - --- - ----- - --- - ------- - ---------- - -- ---- --------------------- ------ -------- ---
在上面的代码中，我们定义了一个名为 setCookie 的函数，该函数接受三个参数：Cookie 名称、Cookie 值和过期时间（单位为小时）。然后，我们使用该函数来设置名为 mycookie 值为 Hello World! 的 Cookie，并将其过期时间设置为 1 小时后。
总结
在本文中，我们介绍了如何使用 JavaScript 设置带有过期时间的 Cookie。通过掌握这项技能，我们可以更好地控制用户信息的有效期，从而提高网站的安全性和可用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27767