Vue3 中 cookie 操作实用函数集锦

2024-02-17 12:51:42

在 Vue3 项目中，cookie 的操作是不可或缺的一部分，它允许我们在用户浏览器中存储和检索数据，从而实现诸如用户认证、个性化设置和跟踪等功能。本文将探讨几个实用的 Vue3 cookie 函数，帮助你轻松高效地管理 cookie。

简介

Vue3 中的 cookie 操作主要通过 document.cookie API 完成，它提供了几个常用的方法。为了简化 cookie 管理，我们可以封装一些实用函数，从而降低代码复杂度并提高可读性。以下是我总结的几个常用的 cookie 函数：

1. 设置 cookie

const setCookie = (name, value, days = 30) => {
  const expires = new Date(Date.now() + (days * 24 * 60 * 60 * 1000)).toUTCString();
  document.cookie = `${name}=${value}; expires=${expires}; path=/`;
};

2. 获取 cookie

const getCookie = (name) => {
  const cookie = `; ${document.cookie}`;
  const parts = cookie.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};

3. 删除 cookie

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

4. 检查 cookie 是否存在

const cookieExists = (name) => {
  return document.cookie.indexOf(`; ${name}=`) !== -1;
};

示例

在 Vue3 组件中，我们可以通过以下方式使用这些函数：

<script>
import { setCookie, getCookie, deleteCookie } from '../utils/cookie';

export default {
  methods: {
    setCookie() {
      setCookie('user_id', '12345');
    },

    getCookie() {
      const userId = getCookie('user_id');
      console.log(`User ID: ${userId}`);
    },

    deleteCookie() {
      deleteCookie('user_id');
    },
  },
};
</script>