js中的cookie的读写操作示例详解

有关 JavaScript 中的 Cookie 读写操作，通常需要通过 document.cookie 属性进行实现。下面是关于如何读写 Cookie 的示例及详细攻略。

读取 Cookie 值

通过 document.cookie 属性可以访问 Cookie 值。Cookie 格式通常为 name=value，使用分号（;）将多个 Cookie 分隔开，每个分号后面还可能有空格。以下是读取 Cookie 值的代码示例：

function getCookie(name) {
  const cookieString = decodeURIComponent(document.cookie);
  const cookies = cookieString.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(`${name}=`)) {
      return cookie.substring(name.length + 1);
    }
  }
  return null;
}

以上代码中，首先使用 decodeURIComponent 函数对 document.cookie 进行解码。然后，使用 split 函数将多个 Cookie 值分割成一个数组。接着，使用 for 循环遍历数组中的每个元素，并使用 startsWith 函数判断是否为要查找的 Cookie，如果是，则使用 substring 函数提取出 Cookie 值并返回。

写入 Cookie 值

写入 Cookie 值通常需要指定 name、value 和过期时间等参数。以下是写入 Cookie 值的代码示例：

function setCookie(name, value, days) {
  const d = new Date();
  d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = `expires=${d.toUTCString()}`;
  document.cookie = `${name}=${encodeURIComponent(value)};${expires};path=/`;
}

以上代码中，首先使用 Date 函数获取当前时间，并将过期时间计算为设定的天数之后。然后，使用 toUTCString 函数将时间转换为 UTC 格式的字符串，作为 expires 参数的值。接着，使用 encodeURIComponent 函数对 value 进行编码，防止其中包含特殊字符（如分号等）。最后，使用 document.cookie 属性将 Cookie 值写入浏览器中。

示例说明：

1. 读取 Cookie：

const name = getCookie('username');
console.log(name);

以上代码将输出名为 'username' 的 Cookie 值。
2. 写入 Cookie：

setCookie('username', 'hello', 3);

以上代码将写入一个名为 'username'，值为 'hello'，过期时间为 3 天的 Cookie 值。