526互联

vue2获取cookie/删除cookie/设置cookie

发布时间 2023-11-09 09:43:42作者: __username

起因，访问不同路由跳到首页/ 需登录账号

demo

<template>
  <div>
    <button @click="setCookie">设置Cookie</button>
    <button @click="getCookie">获取Cookie</button>
    <button @click="deleteCookie">删除Cookie</button>
  </div>
</template>

<script>
import Cookies from 'js-cookie';

export default {
  methods: {
    setCookie() {
      // 设置cookie，使用js-cookie库
      Cookies.set('username', 'John Doe', { expires: 7 }); // 设置名为 'username' 的cookie，有效期为7天
    },
    getCookie() {
      // 获取cookie的值
      const username = Cookies.get('username'); // 获取名为 'username' 的cookie的值
      if (username) {
        console.log(`Username: ${username}`);
      } else {
        console.log('Cookie不存在');
      }
    },
    deleteCookie() {
      // 删除cookie
      Cookies.remove('username'); // 删除名为 'username' 的cookie
    },
  },
};
</script>