實現功能：

1.一周內自動登錄勾選時，將賬號和密碼保存到cookie，下次登陸自動顯示到表單內

2.點擊忘記密碼則清空之前保存到cookie的值，下次登陸需要手動輸入

次要的就不說了直接上主要的代碼

html部分

登陸

幫助

一周內自動登錄

忘記密碼？

登陸

js部分

data () {

return {

ruleform: {

username: '', //用戶名

password: '' //密碼

},

}

}

methods: {

//點擊登錄調用方法

submitform(formname) {

//保存的賬號

var name=this.ruleform.username;

//保存的密碼

var pass=this.ruleform.password;

if(name==''||name==null){

alert("請輸入正確的用戶名");

return

}else if(pass==''||pass==null) {

alert("請輸入正確的密碼");

return

}

//判斷復選框是否被勾選 勾選則調用配置cookie方法

if(this.checked=true){

//傳入賬號名，密碼，和保存天數3個參數

this.setcookie(name,pass,7);

}

//接口

var url='myserver/user/login';

this.$http.post(url,this.ruleform,{emulatejson:true})

.then(res=>{

if(res.body=="fail"){

alert("用戶名或密碼錯誤,請重新輸入");

this.ruleform.username='';

this.ruleform.password='';

return

} else{

alert("登陸成功！")

this.$router.push("/index")

}

});

},

//設置cookie

setcookie(c_name,c_pwd,exdays) {

var exdate=new date();//獲取時間

exdate.settime(exdate.gettime() + 24*60*60*1000*exdays);//保存的天數

//字符串拼接cookie

window.document.cookie="username"+ "=" +c_name+";path=/;expires="+exdate.togmtstring();

window.document.cookie="userpwd"+"="+c_pwd+";path=/;expires="+exdate.togmtstring();

},

//讀取cookie

getcookie:function () {

if (document.cookie.length>0) {

var arr=document.cookie.split('; ');//這里顯示的格式需要切割一下自己可輸出看下

for(var i=0;i

var arr2=arr[i].split('=');//再次切割

//判斷查找相對應的值

if(arr2[0]=='username'){

this.ruleform.username=arr2[1];//保存到保存數據的地方

}else if(arr2[0]=='userpwd'){

this.ruleform.password=arr2[1];

}

}

}

},

//清除cookie

clearcookie:function () {

this.setcookie("","",-1);//修改2值都為空，天數為負1天就好了

}

},

//頁面加載調用獲取cookie值

mounted(){

this.getcookie()

}

總結

以上所述是小編給大家介紹的vue實現表單登錄頁保存賬號和密碼到cookie功能，希望對大家有所幫助

如您對本文有疑問或者有任何想說的，請點擊進行留言回復，萬千網友為您解惑！

總結

以上是生活随笔為你收集整理的vue登录如何存储cookie_vue项目实现表单登录页保存账号和密码到cookie功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。