vue中設(shè)置、獲取、刪除cookie的方法
更新時間：2018年09月21日 11:33:57 作者：tiantiandashi
今天小編就為大家分享一篇vue中設(shè)置、獲取、刪除cookie的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、在src目錄下的access下新建一個cookie.js,
內(nèi)容如下：
export function setCookie(c_name,value,expire) {
var date=new Date()
date.setSeconds(date.getSeconds()+expire)
document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
//console.log(document.cookie)
}
export function getCookie(c_name){
if (document.cookie.length>0){
let c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
let c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
export function delCookie(c_name){
setCookie(c_name, "", -1)
}
2、在main.js中引入并且將cookie設(shè)置成vue的全局變量
3、這樣，在登錄或退出等頁面上就可以調(diào)用$cookieStore這個全局變量來使用
// 將用戶名存進(jìn)cookie，第三個參數(shù)60為秒，意味著一分鐘后cookie自動消失。一天為 86400 s this.$cookieStore.setCookie( 'username' ,this.username,60);
以上這篇vue中設(shè)置、獲取、刪除cookie的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用 Vue 3 的 createApp方法初始化應(yīng)用的基本步驟
createApp 是 Vue 3 引入的全局 API,用于創(chuàng)建一個應(yīng)用實例,這篇文章主要介紹了如何使用 Vue 3 的 createApp方法初始化應(yīng)用,通過 createApp 方法,我們從 Vue 3 的基本初始化開始,擴(kuò)展到插件的應(yīng)用、多個應(yīng)用實例的創(chuàng)建等,需要的朋友可以參考下2024-05-05
解決vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?的問題
這篇文章主要介紹了vue?vite啟動項目報錯ERROR:?Unexpected?“\x88“?in?JSON?原因,本文給出出現(xiàn)此類問題的原因所在并給出解決方法，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vuex的使用及知識點筆記，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在Vue3中,推薦使用::deep作為深度選擇器,它比Vue2中的::v-deep語法更簡潔,::v-deep、::deep、:deep()、>>>和/deep/都是用于穿透組件作用域的選擇器,但Vue3更傾向于使用::deep或:deep(),感興趣的朋友跟隨小編一起看看吧2024-10-10
Vue中Layout內(nèi)部布局el-row、el-col的實現(xiàn)
layout是一種非常方便的布局方式,本文主要介紹了Vue中Layout內(nèi)部布局el-row、el-col的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-07-07
HTML頁面中使用Vue示例進(jìn)階（快速學(xué)會上手Vue）
Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式，一種實在html中直接使用vue做開發(fā)，一種是企業(yè)級的單頁面應(yīng)用。2023-02-02
使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方式
這篇文章給大家介紹了Vue3監(jiān)聽store中數(shù)據(jù)變化的三種方法,使用watch和storeToRefs函數(shù),使用計算屬性computed和使用watchEffect函數(shù)這三種方法,文中通過代碼講解非常詳細(xì),需要的朋友可以參考下2024-01-01
詳解Vue webapp項目通過HBulider打包原生APP
這篇文章主要介紹了詳解Vue webapp項目通過HBulider打包原生APP，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue-router實現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯，需要的朋友可以參考下2020-02-02