1.安裝vue-cookies

npm install vue-cookies -S

2.在main.js引入

import VueCookies from "vue-cookies"; Vue.use(VueCookies);

如圖：

3.在vue組件中使用(如果存入的是對(duì)象，需要先轉(zhuǎn)換為json字符串)

設(shè)置cookies

this.$cookies.set('fileInfoId', to.query.fileInfoId)

如果是在某個(gè)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.針對(duì)瀏覽器存在cookie，前端卻獲取不到的問題：

httpOnly默認(rèn)為true打?qū)μ?hào)√情況下，禁止javascript操作cookie，導(dǎo)致獲取不到，可以讓后端設(shè)置false；

后端使用node+koa，種客戶端一個(gè)cookie，但是在客戶端內(nèi)通過document.cookie獲取不了此cookie。經(jīng)查是由于koa通過ctx.cookies.set(name, value, [options])種的cookie是自動(dòng)默認(rèn)帶httpOnly的，httpOnly是服務(wù)器可訪問 cookie, 默認(rèn)是 true。禁止javascript操作cookie（為避免跨域腳本(xss)攻擊，通過javascript的document.cookie無法訪問帶有HttpOnly標(biāo)記的cookie。）
所以通過在后端設(shè)置ctx.cookies.set(name, value, {httpOnly:false})關(guān)掉httponly即可。

js-cookie參考

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue-cookies使用方法，vue中使用获取cookie的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。