JS前端操作 Cookie源码示例解析

当我们需要在前端操作Cookie时，我们可以通过JavaScript来实现。以下是针对Cookie相关操作的完整攻略：

什么是Cookie？

Cookie是在浏览器上存储的一些文本数据，这些数据通常是与网站相关联的，如用户ID、购物车数据等。通过设置Cookie，可以更好地跟踪和管理用户的首选项、购物车数据、登录信息等。

前端如何操作Cookie？

前端操作Cookie的主要方式是通过JavaScript的document.cookie属性。这个属性允许我们读取、写入和删除Cookie。document.cookie返回当前浏览器会话中可用的所有Cookie字符串，并且可以通过字符串分离和解析属性以读取或设置任意值。

以下是一些使用JavaScript操作Cookie的示例：

1. 读取Cookie

使用document.cookie属性来读取当前浏览器会话中存在的Cookie。

let cookieStr = document.cookie;
console.log(cookieStr);

2. 设置Cookie

使用document.cookie属性来设置新的Cookie。在这个例子中，我们将设置一个名为username的新Cookie。

const username = "John Doe";
const cookieValue = encodeURIComponent(username);
document.cookie = `username=${cookieValue}; path=/`;

在这个例子中，我们使用了encodeURIComponent()来将字符串作为值编码并保证在写入Cookie时不会引发语法错误。我们还指定了一个路径来限制仅在路径为/下的页面才可见。

3. 删除Cookie

可以通过将Cookie的过期日期设置为一个过去的时间来删除Cookie。

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

在这个例子中，我们将过期日期设置为从1970年1月1日起的过去时间，这将导致该Cookie被删除。注意，这里必须指定该Cookie存在的路径及名称。

Cookie源码示例解析

在以下示例中，我们将创建一个JavaScript函数来设置、读取和删除Cookie。

function setCookie(cookieName, cookieValue, expirationDays) {
  const date = new Date();
  date.setTime(date.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${cookieName}=${cookieValue};${expires};path=/`;
}

function getCookie(cookieName) {
  const name = `${cookieName}=`;
  const cookies = document.cookie.split(';');
  for(let i = 0; i < cookies.length; i++) {
    let temp = cookies[i];
    while (temp.charAt(0) === ' ') {
      temp = temp.substring(1);
    }
    if (temp.indexOf(name) === 0) {
      return temp.substring(name.length, temp.length);
    }
  }
  return '';
}

function deleteCookie(cookieName) {
  document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
}

在这个示例中，我们定义了一个名为setCookie的函数，该函数接受三个参数：cookie名称、cookie值和cookie过期时间。在函数中，我们创建了一个新的Date对象并计算出Cookie的过期日期，并指定了该Cookie可见性的路径。最后，我们在document.cookie上设置这个cookie。

getCookie函数被用来读取一个特定名称的Cookie。它首先检查当前浏览器会话中是否存在Cookie，并使用split()方法将document.cookie字符串分离为Cookie数组。然后在循环整个数组中，查找与输入的Cookie名称相同的Cookie。如果找到了，则函数返回该Cookie的值。

deleteCookie函数的工作原理与setCookie类似，但它将expires设置为1970年1月1日以过期并删除特定的Cookie。

这个示例代码展示了如何使用Cookie存储和读取用户首选项和其他数据等常见的用途。