前端读取和操作Cookie的方法

什么是Cookie?

在介绍前端读取和操作Cookie的方法之前，我们首先要了解什么是Cookie。

Cookie是网站为了存储用户相关信息而在用户浏览器中保存的一小段数据。它可以用来存储用户的个性化设置、购物车内容、登录状态等。

读取Cookie

前端读取Cookie有多种方法，以下是几种常见的方法：

使用document.cookie属性

通过document.cookie属性可以获得当前文档的所有Cookie内容。这个属性返回一个字符串，包含所有的Cookie及其值，格式为name=value，多个Cookie使用分号加空格(;)分隔。

const cookies = document.cookie;
console.log(cookies);

使用document.cookie属性和正则表达式

如果我们只想获取某个特定的Cookie的值，可以使用正则表达式来遍历所有的Cookie并匹配出需要的值。

function getCookieValue(cookieName) {
  const cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].split('=');
    if (cookie[0] === cookieName) {
      return cookie[1];
    }
  }
  return null;
}

const userId = getCookieValue('userId');
console.log(userId);

操作Cookie

除了读取Cookie的值，前端还可以通过设置Cookie来存储信息。

使用document.cookie属性

通过设置document.cookie属性，我们可以添加、修改或删除Cookie。

document.cookie = "name=value"; // 添加或修改名为name的Cookie
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; // 删除名为name的Cookie

需要注意的是，当修改或删除Cookie时，需要注意expires属性的值。expires属性指定了Cookie的过期时间，如果不设置，那么Cookie将在用户关闭浏览器后自动删除。

使用封装的函数

为了方便操作Cookie，我们可以封装一些函数。

function setCookie(cookieName, cookieValue, daysToExpire) {
  const date = new Date();
  date.setTime(date.getTime() + (daysToExpire * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  document.cookie = cookieName + "=" + cookieValue + "; " + expires;
}

function getCookieValue(cookieName) {
  const cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].split('=');
    if (cookie[0] === cookieName) {
      return cookie[1];
    }
  }
  return null;
}

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

使用封装的函数可以更方便地操作Cookie。

setCookie("name", "value", 7); // 添加或修改名为name的Cookie，有效期为7天
const name = getCookieValue("name"); // 读取名为name的Cookie的值
deleteCookie("name"); // 删除名为name的Cookie

总结

在前端开发中，Cookie是存储用户相关信息的一种常见方式。通过前面介绍的方法，我们可以方便地读取和操作Cookie。当然，需要注意Cookie的大小限制以及安全性等问题，以便保护用户的隐私和数据安全。

本文来自极简博客，作者：微笑向暖阳，转载请注明原文链接：前端读取和操作Cookie的方法