我們這回使用純前端儲存密碼

既然是記住密碼，前端也就是使用cookie儲存，訪問時用cookie讀取

先來了解下cookie的基本使用吧

Cookie

所有的cookie資訊都在document.cookie中存放著，是一個字串，裡面的cookie以分號和空格分隔。就像這樣：

	"key1=value1; key2=value2; key3=value3"
	// 使用document.cookie 來獲取所有cookie
	docuemnt.cookie = "id="+value

操作cookie

	/**
 * 設定cookie值
 *
 * @param {String} name cookie名稱
 * @param {String} value cookie值
 * @param {Number} expiredays 過期時間，天數
 */
 function setCookie (name,value,expiredays) {
 let exdate = new Date() 
 		//setDate獲取N天后的日期
 exdate.setDate(exdate.getDate() + expiredays) //getDate() 獲取當前月份的日 + 過期天數
 document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
 }
 /**
 * 獲取cookie值
 * @param {String} name cookie名稱
 */
 function getCookie (name) {
  var arr = document.cookie.split(";") //轉換陣列
  //["_ga=GA1.1.1756734561.1561034020"," mobile=123" password=456"]
  for(var i=0;i<arr.length;i++){
   var arr2 = arr[i].split('='); // ["_ga","GA1.1.1756734561.1561034020"]
   if(arr2[0].trim() == name){
    return arr2[1]
   }
  }
 }
 /**
 * 刪除指定cookie值
 * @param {String} name cookie名稱
 */
 function clearCookie (name) {
 setCookie(name,'',-1)
 }
 /**
 * 瀏覽器是否支援本地cookie
 */
 function isSupportLocalCookie () {
 let {name,value} = {name: 'name',value: 'mingze'}
 setCookie(name,1) //設定cookie
 return getCookie(name).includes(value) //includes 判斷陣列name中是否含有當前value(返回true or false)
 }

好了瞭解了cookie我們開始如何實現一個簡單的記住密碼功能

HTML程式碼

 <el-form :model="ruleForm" :rules="rules"
 status-icon
 ref="ruleForm" 
 label-position="left" 
 label-width="0px" 
 class="demo-ruleForm login-page">
 <h3 class="title">系統登入</h3>
<el-form-item prop="username">
  <el-input type="text" 
   v-model="ruleForm2.username" 
   auto-complete="off" 
   placeholder="使用者名稱"
  ></el-input>
 </el-form-item>
<el-form-item prop="password">
  <el-input type="password" 
   v-model="ruleForm2.password" 
   auto-complete="off" 
   placeholder="密碼"
  ></el-input>
 </el-form-item>
<el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">記住密碼</el-checkbox>
<el-form-item style="width:100%;">
 <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登入	</el-button>
</el-form-item>
</el-form>

vue程式碼

 data(){
  return {
  	 logining: false,checked: true
   ruleForm: {
    username: '',password: '',},rules: {
    username: [{required: true,message: '請輸入您的帳戶',trigger: 'blur'}],password: [{required: true,message: '請輸入您的密碼',trigger: 'blur'}]
   },}
 },mounted() {
  this.account() //獲取cookie的方法
 },account(){
  if(document.cookie.length <= 0){
   console.log(this.getCookie('mobile'))
   this.ruleForm.username = this.getCookie('mobile')
   this.ruleForm.password = this.getCookie('password')
  }
 },setCookie(c_name,c_pwd,exdate){ //賬號，密碼 ，過期的天數
  var exdate = new Date()
  console.log(c_name,c_pwd)
  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //儲存的天數
  document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
  document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
 },getCookie(name){
  var arr = document.cookie.split(";") 
   //["_ga=GA1.1.1756734561.1561034020"," mobile=123" password=456"]
   for(var i=0;i<arr.length;i++){
    var arr2 = arr[i].split('='); // ["_ga","GA1.1.1756734561.1561034020"]
    if(arr2[0].trim() == name){
     return arr2[1]
    }
   }
  },clearCookie(){
   this.setCookie("","",-1) //清除cookie 
  },handleSubmit(){ //提交登入
	 this.$refs.ruleForm.validate((valid) => {
   if(valid){
   	this.logining = true;
   	var _this = this;
   	if(_this.checked == true){
   	 	//存入cookie
    _this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //儲存7天
   }else{
    _this.clearCookie();
   }
   Login({
    mobile:_this.ruleForm.username,password:_this.ruleForm.password
   }).then((result) => {
    console.log(result)
    _this.$alert('登陸成功')
   })
  }
	}

好了，這回的記住密碼就到這裡，小夥伴們一起努力吧 ^ 0 ^

總結

到此這篇關於前端vue+elementUI如何實現記住密碼功能的文章就介紹到這了,更多相關vue+elementUI記住密碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！