vue-cookies使用方法,vue中使用获取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;List item

后端使用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即可。

js-cookie参考

猜你喜欢

转载自blog.csdn.net/i_am_a_div/article/details/109097459