javascript实现设置、获取和删除Cookie的方法

下面是关于“JavaScript实现设置、获取和删除Cookie的方法”的完整攻略。

设置Cookie

Cookie是HTTP协议提供的一种状态管理机制。可以通过JS设置Cookie来在浏览器端存储一些信息。在JavaScript中，设置Cookie主要包括三个步骤：

1. 将需要存储的数据转换为字符串格式。
2. 将存储字符串写入Cookie。
3. 设置Cookie的过期时间。

下面是实现设置Cookie的方法：

function setCookie(name, value, expires) {
  let cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

  if (expires instanceof Date) {
    cookieText += '; expires=' + expires.toUTCString();
  }

  document.cookie = cookieText;
}

函数setCookie()有三个参数，分别是Cookie的名称、值和过期时间。变量cookieText保存着需要写入Cookie的字符串。如果过期时间是Date对象的实例，那么通过toUTCString()方法将其转换为UTC格式并加入到cookieText中。最后，将cookieText设置为document.cookie。下面是一些示例代码来说明如何使用setCookie()函数设置一个Cookie：

setCookie('username', 'bob', new Date(Date.now() + 30 * 24 * 3600 * 1000)); // 设置名为username的Cookie，值为bob，过期时间为30天之后。

setCookie('score', '90', new Date(Date.now() + 365 * 24 * 3600 * 1000)); // 设置名为score的Cookie，值为90，过期时间为一年之后。

获取Cookie

在JavaScript中，获取Cookie包含两个步骤：

1. 获取所有cookies
2. 解析指定的cookie

下面是实现获取Cookie的方法：

function getCookie(name) {
  let cookies = document.cookie.split(';');

  for (let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    let eqIdx = cookie.indexOf('=');
    let cookieName = cookie.substring(0, eqIdx);

    if (cookieName === name) {
      return decodeURIComponent(cookie.substring(eqIdx + 1));
    }
  }

  return undefined;
}

函数getCookie()有一个参数，分别是Cookie的名称。在函数体内部，我们首先使用split()函数把文档cookie分割成一个cookie数组，然后对所有的cookie进行遍历。在每个cookie内部，通过indexOf()查找cookie名称的位置，并解析出cookie的值。如果找到匹配的Cookie，则使用decodeURIComponent()将其编码设置为字符串并返回，否则返回undefined。下面是一个调用getCookie()函数并打印结果的例子：

console.log(getCookie('username')); // 打印Cookie "username" 的值。

let score = getCookie('score');
if(score) {
  console.log(parseInt(score) + 10); // 将Cookie "score" 的值转为整数并打印。
}

删除Cookie

删除Cookie的方法很简单，只需要将Cookie的过期时间设置为一个以前的时间即可。下面是实现删除Cookie的方法：

function deleteCookie(name) {
  let expires = new Date(Date.now() - 1); // 过期时间设置为1ms之前。
  document.cookie = name + '=; expires=' + expires.toUTCString(); // 通过将过期时间设置为过去时间来删除Cookie。
}

函数deleteCookie()有一个参数，分别是Cookie的名称。在函数体内部，我们创建一个过期时间为1ms之前的Date实例，然后将Cookie的名称和过期时间拼接起来以删除该Cookie。下面是实例代码来说明如何删除一个Cookie：

deleteCookie('username'); // 删除名称为username的Cookie
deleteCookie('score'); // 删除名称为score的Cookie

这就是JavaScript实现设置、获取和删除Cookie的方法的完整攻略。希望对你有所帮助！