vue-cookies使用方法与vue使用获取cookie实现过程
更新时间：2026年04月25日 11:18:46 作者：i_am_a_div_日积月累_
本文主要介绍了 Vue 中使用 vue-cookies 库的操作方法,包括安装、引入、设置、获取、删除 cookies 等,并针对浏览器存在 cookie 前端却获取不到的问题进行了分析,提出了解决方案
1.安装vue-cookies
npm install vue-cookies -S
2.在main.js引入
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
如图：
3.在vue组件中使用
(如果存入的是对象，需要先转换为json字符串)
设置cookies
this.$cookies.set('fileInfoId', to.query.fileInfoId)
如果是在某个js，例如router.js下使用，如下引入使用即可
import cookies from "vue-cookies";
cookies.set('fileInfoId', to.query.fileInfoId)
4.获取cookies
this.$cookies.get('fileInfoId')
5.删除cookies
this.$cookies.remove('fileInfoId');
6.查看cookies
this.$cookies.isKey('fileInfoId') // return false or true
7.获取所有cookies
this.$cookies.keys() // return a array
8.针对浏览器存在cookie，前端却获取不到的问题
httpOnly默认为true打对号√情况下，禁止javascript操作cookie，导致获取不到，可以让后端设置false；
后端使用node+koa，种客户端一个cookie，但是在客户端内通过document.cookie获取不了此cookie。
经查是由于koa通过ctx.cookies.set(name, value, [options])种的cookie是自动默认带httpOnly的，httpOnly是服务器可访问 cookie, 默认是 true。
禁止javascript操作cookie（为避免跨域脚本(xss)攻击，通过javascript的document.cookie无法访问带有HttpOnly标记的cookie。）
所以通过在后端设置ctx.cookies.set(name, value, {httpOnly:false})关掉httponly即可。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
KeepAlive 是 vue 中的内置组件，当多个组件动态切换时可以对实例状态进行缓存，本文就来详细的介绍一下Vue中KeepAlive内置缓存使用，感兴趣的可以了解一下2023-10-10
今天小编就为大家分享一篇vue解决一个方法同时发送多个请求的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了解决vue中reader.onload读取文件的异步问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue用Export2Excel导出excel,多级表头数据方式
这篇文章主要介绍了Vue用Export2Excel导出excel,多级表头数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
本文通过实例代码给大家介绍了Vue axios配置,非常不错，代码简单易懂，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue如何把字符串中的所有@内容,替换成带标签的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要为大家介绍了拿来即用的vue旋转木马组件demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了Vue3 Pinia如何修改全局状态变量值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
接到这样一个项目需求是这样的，前端vue 必须对象传递后端也必须对象接收，接下来通过本文给大家介绍下net 6+vue 插件axios 后端接收参数的问题,需要的朋友可以参考下2022-01-01
最新评论