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即可。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue项目中使用Vux的安装过程,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-05-05
Pinia 是 Vue 3 的官方推荐状态管理库,旨在替代 Vuex,提供更简单、直观的状态管理解决方案,Pinia 的设计理念是简单、易于学习和使用,本文给大家详细介绍了Vue的Pinia如何做到刷新不丢数据,需要的朋友可以参考下2025-01-01
这篇文章介绍了如何克隆虚拟机,作者首先指出在克隆过程中,如果“下一步”按钮是灰色状态,不能进行下一步操作,这时,作者建议先关闭虚拟机,然后再进行克隆操作,关闭虚拟机后,作者展示了克隆虚拟机的步骤,并给出了最终的克隆结果2026-01-01
这篇文章主要介绍了使用Vue绑定class和style样式的几种写法，文章通过代码示例介绍的非常详细，具有一定的参考价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了解决vue2中使用elementUi打包报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vuex实现记事本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
使用强大的Vuetify开发前端页面,结果发现官方没有提供简便的全局消息通知组件,所以自己动手写了一个简单的组件,接下来通过本文给大家介绍使用vuetify实现全局v-alert消息通知的详细代码,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要为大家介绍了vue3容器布局和导航路由实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要为大家详细介绍了vue项目实现图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论