vue-cookies使用方法，vue中使用获取cookie

阳光穿透心脏的1/2处 2021-09-02 08:37 3791阅读 0赞

1.安装vue-cookies

npm install vue-cookies -S

2.在main.js引入

import VueCookies from "vue-cookies";

Vue.use(VueCookies);

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]

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)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]

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参考][js-cookie]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/6078a86a5f20446790f25ed1a9fd7ba5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/98d89759a91d45259f243d73df985fe2.png
[List item]: /images/20210724/37e1a03d626d4a2b97f9d10d30be5589.png
[js-cookie]: https://blog.csdn.net/i_am_a_div/article/details/108223553