vue3使用js-cookie，设置过期时间为分钟

在Vue 3中使用Cookie的过程类似于在Vue 2中使用。你可以使用第三方库来管理Cookie，例如js-cookie。以下是在Vue 3中使用js-cookie的简单步骤：

用法

1. 安装js-cookie库：

   在你的Vue 3项目中，可以使用npm或yarn来安装js-cookie：

   使用npm：

   npm install js-cookie
   

   使用yarn：

   yarn add js-cookie
   

2. 导入并使用js-cookie：

   在你的Vue组件中，你可以导入js-cookie并使用它来设置、获取和删除Cookie。例如：

   // 导入js-cookie
   import Cookies from 'js-cookie';
   
   export default {
     methods: {
       // 设置Cookie
       setCookie() {
         Cookies.set('myCookie', 'cookieValue', { expires: 7 }); // 设置一个名为'myCookie'的Cookie，有效期7天
       },
       // 获取Cookie
       getCookie() {
         const cookieValue = Cookies.get('myCookie'); // 获取名为'myCookie'的Cookie的值
         console.log(cookieValue);
       },
       // 删除Cookie
       deleteCookie() {
         Cookies.remove('myCookie'); // 删除名为'myCookie'的Cookie
       },
     },
   };
   

   你可以在组件的方法中调用setCookie、getCookie和deleteCookie方法，以便管理Cookie。

3. 在需要的地方调用这些方法：

   在你的Vue模板中，你可以通过事件触发来调用这些方法，例如在按钮点击事件中：

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

   这些按钮点击事件将触发相应的Cookie操作。

设置过期时间为分钟

js-cookie 写cookie默认按天来算的。

Cookies.set('name', 'value', { expires: 7 })

如果要设置成分钟，应该怎么做呢？

JavaScript Cookie 支持在expires 属性中传递Date实例。这提供了很大的灵活性，因为Date实例可以指定任何时间。

例如，当您希望 cookie 在 15 分钟后过期时：

var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {
    expires: inFifteenMinutes
});

指定要在半天（12 小时）内到期的分数：

var inHalfADay = 0.5;
Cookies.set('foo', 'bar', {
    expires: inHalfADay
});

或在 30 分钟内：

var in30Minutes = 1/48;
Cookies.set('foo', 'bar', {
    expires: in30Minutes
});