vue+iview/element 一般用來快速搭建後臺管理系統，登錄頁的記住密碼功能也是必不可少的。
記住密碼快速登錄功能(iview ui)：
思路：首次登錄，記住密碼，將密碼存儲到cookie中，退出登錄，下次進來的時候，讀取cookie登錄。
1.<Checkbox v-model="autoLogin" size="large">記住密碼</Checkbox> //v-model 綁定的是多選框的初始狀態(是否選中)
2.點擊頁面中的登錄按鈕後，判斷是否選中了記住密碼選項
if (this.autoLogin) { //如果選中了記住密碼的選項
this.setCookie(username, password, 7); //則去設置cookie,username是要提交的用戶名，password是密碼，7是要存儲的天數
} else {
this.clearCookie() //如果沒有選中記住密碼，那就清除cookie
}
3.寫有關設置，清除，讀取的函數
//設置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();
//expires是設置cookie的過期時間，toGMTString是將日期轉爲GMT的字符串進行拼接
window.document.cookie =
"password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
//讀取cookie 將用戶名和密碼回顯到input框中嘍~~
getCookie: function() {
if (document.cookie.length > 0) {
var arr = document.cookie.split("; "); //這裏顯示的格式需要切割一下自己可輸出看下
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split("="); //再次切割
//判斷查找相對應的值
if (arr2[0] == "userName") {
this.username = arr2[1]; //保存到保存數據的地方 （data中）
} else if (arr2[0] == "password") {
this.password = arr2[1];
}
}
console.log(this.username,this.password)
}
},
//清除cookie
clearCookie: function() {
this.setCookie("", "", -1); //修改2值都爲空，天數爲負1天就好了
}
4.效果圖
