JavaScript 中 Cookie 的用法？

推荐答案

// www.javascriptcn.com code example
// 设置 Cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// 获取 Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

本题详细解读

1. 设置 Cookie

在 JavaScript 中，可以通过 document.cookie 属性来设置 Cookie。Cookie 的格式通常为 key=value，并且可以附加一些可选的属性，如 expires、path、domain 等。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

• username=John Doe：设置 Cookie 的键值对。
• expires=Thu, 18 Dec 2023 12:00:00 UTC：设置 Cookie 的过期时间。如果不设置过期时间，Cookie 将在浏览器关闭时自动删除。
• path=/：设置 Cookie 的作用路径。如果不设置，默认为当前路径。

2. 获取 Cookie

获取 Cookie 时，document.cookie 会返回当前域名下的所有 Cookie，格式为 key1=value1; key2=value2; ...。可以通过字符串操作来提取特定 Cookie 的值。

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

• ; ${document.cookie}：在所有 Cookie 前添加一个分号和空格，方便后续分割。
• parts.split(; ${name}=)：通过 name 来分割字符串，获取对应的值。
• parts.pop().split(';').shift()：提取出值并去除可能的分号。

3. 删除 Cookie

删除 Cookie 的方法是将 Cookie 的过期时间设置为过去的时间。

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

• username=：将 Cookie 的值设置为空。
• expires=Thu, 01 Jan 1970 00:00:00 UTC：将过期时间设置为过去的时间，浏览器会自动删除该 Cookie。
• path=/：确保删除的路径与设置时的路径一致。