JavaScript 怎样设置 cookie 值

在 Web 开发中，cookie 是存储在用户浏览器中的小段数据，用于在客户端和服务器之间传递信息。使用 JavaScript 设置 cookie 值是一项常见的操作，下面我们就来详细探讨一下。

了解 cookie 的基本结构很重要。一个 cookie 由名称、值、过期时间、路径等部分组成。通过 JavaScript 的 document.cookie 属性可以对 cookie 进行操作。

要设置一个简单的 cookie，语法如下：

document.cookie = "cookieName=cookieValue";

例如：

document.cookie = "username=JohnDoe";

这样就创建了一个名为 username，值为 JohnDoe 的 cookie。不过，这个 cookie 是会话 cookie，当浏览器关闭时就会被删除。

如果想要设置一个带有过期时间的持久化 cookie，可以在 cookie 字符串中添加 expires 字段。例如，设置一个在 1 天后过期的 cookie：

let d = new Date();
d.setTime(d.getTime() + (24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = "username=JohnDoe;" + expires;

在上述代码中，首先创建了一个 Date 对象，获取当前时间并加上一天的毫秒数，然后将新的时间设置为 expires 的值，并添加到 document.cookie 中。

还可以设置 cookie 的路径。通过 path 字段指定 cookie 有效的路径。例如：

document.cookie = "username=JohnDoe;expires=" + d.toUTCString() + ";path=/";

这里将路径设置为根路径 /，意味着该 cookie 在整个网站都有效。

在设置 cookie 值时，还需要注意一些事项。cookie 的值需要进行 URL 编码，以避免特殊字符带来的问题。可以使用 encodeURIComponent() 函数进行编码，读取时则使用 decodeURIComponent() 函数解码。

掌握 JavaScript 设置 cookie 值的方法，能够为 Web 应用增添很多实用功能，如记住用户登录状态、存储用户偏好设置等。无论是简单的会话 cookie 还是持久化的、带有特定路径的 cookie，都可以通过合适的代码轻松实现。通过合理运用 cookie 设置，能提升用户体验，优化网站性能，为 Web 开发带来更多便利。