vue设置cookie

// 使用 Vue 设置 Cookie 的示例代码

// 引入 js-cookie 库，这是一个方便操作 cookie 的库
import Cookies from 'js-cookie';

export default {
  methods: {
    // 设置 Cookie
    setCookie(name, value, days) {
      if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = "expires=" + date.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
      } else {
        document.cookie = name + "=" + value + ";path=/";
      }
    },

    // 使用 js-cookie 设置 Cookie（更简便的方式）
    setCookieWithJsCookie(name, value, days) {
      Cookies.set(name, value, { expires: days });
    },

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

    // 使用 js-cookie 获取 Cookie
    getCookieWithJsCookie(name) {
      return Cookies.get(name);
    },

    // 删除 Cookie
    deleteCookie(name) {
      document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    },

    // 使用 js-cookie 删除 Cookie
    deleteCookieWithJsCookie(name) {
      Cookies.remove(name);
    }
  }
}

解释说明：

1. 设置 Cookie：

   • setCookie 方法通过原生 JavaScript 操作 document.cookie 来设置 Cookie。
   • setCookieWithJsCookie 方法使用 js-cookie 库来简化设置 Cookie 的过程。

2. 获取 Cookie：

   • getCookie 方法通过解析 document.cookie 字符串来获取指定名称的 Cookie 值。
   • getCookieWithJsCookie 方法使用 js-cookie 库直接获取 Cookie 值。

3. 删除 Cookie：

   • deleteCookie 方法通过将 Cookie 的过期时间设置为过去的日期来删除 Cookie。
   • deleteCookieWithJsCookie 方法使用 js-cookie 库提供的 remove 方法删除 Cookie。

通过这些方法，你可以在 Vue 项目中轻松地进行 Cookie 的设置、获取和删除操作。建议使用 js-cookie 库，因为它提供了更简洁和可靠的 API。