使用 Javascript 设置 Cookie

在 Web 开发中，有时需要在客户端存储一些数据，比如用户信息、浏览历史等等。这时，我们可以使用 Cookie 技术来实现。

什么是 Cookie

Cookie 是存储在客户端的一小段文本数据，它通常由服务器生成，然后发送给客户端，客户端将其存储起来。之后，每次客户端向服务器发送请求时，都会自动将 Cookie 发送给服务器，服务器可以通过 Cookie 获取客户端的一些信息，来实现一些功能，比如用户登录、保存用户偏好等等。

设置 Cookie

在 Javascript 中，我们可以通过 document.cookie 来设置 Cookie。

document.cookie = "name=value; expires=date; path=path; domain=domain; secure";

其中，name 表示 Cookie 的名称，value 表示要存储的值。

expires 表示 Cookie 的过期时间，它可以设置成一个日期字符串，表示 Cookie 什么时候过期。例如：

document.cookie = "name=value; expires=Sat, 31 Dec 2022 00:00:00 UTC; path=/";

表示 Cookie 的过期时间是 2022 年 12 月 31 日。

path 表示 Cookie 的作用范围。如果省略了 path，则表示该 Cookie 对于所有同源的页面都可见。

domain 表示 Cookie 的作用域。如果省略了 domain，则表示该 Cookie 对于当前域名可见。

secure 表示该 Cookie 只能通过安全协议（比如 HTTPS）发送。

示例

下面是一个设置 Cookie 的示例：

document.cookie = "name=John Doe; expires=Sat, 31 Dec 2022 00:00:00 UTC; path=/";

这个例子中，我们设置了一个名为 name，值为 John Doe 的 Cookie。它的过期时间是 2022 年 12 月 31 日，并且在整个网站都可以访问。

注意事项

• 设置 Cookie 时需要遵循特定的格式，格式不正确会导致设置失败。
• 在同一域名下，不能存在两个相同名称的 Cookie，否则后设置的 Cookie 会覆盖之前的 Cookie。
• Cookie 的大小是有限制的，超过大小限制会导致设置失败。不同浏览器的大小限制不同，一般在 4KB 到 10KB 之间。
• 在安全性较高的网站上，需要设置 Cookie 的 secure 属性为 true，否则会被认为是不安全的。

参考资料

• MDN Web Docs - HTTP Cookies
• JavaScript Cookies