在Vue 3中使用Cookie的过程类似于在Vue 2中使用。你可以使用第三方库来管理Cookie，例如js-cookie。以下是在Vue 3中使用js-cookie的简单步骤：
用法
-
安装
js-cookie库：在你的Vue 3项目中，可以使用npm或yarn来安装
js-cookie：使用npm：
npm install js-cookie使用yarn：
yarn add js-cookie -
导入并使用
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。 -
在需要的地方调用这些方法：
在你的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
});
原文始发于微信公众号（大前端编程教学）：vue3使用js-cookie，设置过期时间为分钟
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224525.html
