在vue中獲取cookie

原生js方法沒有直接獲取cookie中值的，所以我在vue的項(xiàng)目中我自己寫了個(gè)獲取cookie值的方法（還有刪除與設(shè)置cookie的方法還沒去寫，大家一起來(lái)補(bǔ)充完善）

<!-- 在使用的頁(yè)面中 -->methods: { getCookieVal(key) { if (document.cookie.length === 0) returnconst cookieConfig = new Map()document.cookie.split('; ').map((item)=>{const itemArr = item.split('=')cookieConfig.set(itemArr[0],itemArr[1])})return cookieConfig.get(key) }}<!-- 在utils中 -->const getCookieVal = (key) =>{ if (document.cookie.length === 0) returnconst cookieConfig = new Map()document.cookie.split('; ').map((item)=>{const itemArr = item.split('=')cookieConfig.set(itemArr[0],itemArr[1])})return cookieConfig.get(key) }module.exports = {otherMethods...getCookieVal, // 新增入方法}<!-- 在需要使用的頁(yè)面引入 -->import { getCookieVal ,otherMethods...} from '@/utils'復(fù)制代碼

(ps:這個(gè)方法只能獲取同一個(gè)作用域下的cookie的值，關(guān)于cookie作用域的注意點(diǎn)下面會(huì)寫)

在vue中設(shè)置、清除cookie

<!-- 獲取cookie -->const cookieVal = this.getCookieVal('keyName') <!-- 設(shè)置cookie -->document.cookie = `${keyName}=${keyValue};path=/;expires=7`;<!-- 清除cookie -->document.cookie = `${keyName}=; expires=Thu, 01 Jan 1970 00:00:01` GMT;`(設(shè)置過(guò)期時(shí)間小于當(dāng)前時(shí)間則會(huì)被瀏覽器清除) 復(fù)制代碼

（tips:path設(shè)置為整個(gè)主域/,不設(shè)置的話在其他頁(yè)面獲取時(shí)候會(huì)undefined ）

h5項(xiàng)目中使用JQ對(duì)cookie進(jìn)行操作

<!-- 設(shè)置(寫入) -->$.cookie('keyName', 'keyValue', { domain:'qq.com', path: '/',expires: 7 });( expires屬性設(shè)置過(guò)期時(shí)間；path屬性設(shè)置作用域)<!-- 獲取(讀取） -->$.cookie('keyName')<!-- 清除(重置) -->$.cookie("keyName", null, { path: "/" }); // 這是個(gè)坑 (實(shí)際上不設(shè)置后keyValue變?yōu)樽址?span id="ozvdkddzhkzd" class="hljs-string">'null',不建議)建議使用一下兩種方法$.removeCookie('keyName',{ path: '/'});$.cookie('keyName','',{ path: '/' })復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5c10560df265da6135726db0

總結(jié)

以上是生活随笔為你收集整理的在Vue2.0项目中与H5项目中获取、设置、清除cookie的一些注意点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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