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

既然是記住密碼，前端也就是使用cookie保存，訪問(wèn)時(shí)用cookie讀取

先來(lái)了解下cookie的基本使用吧

Cookie

所有的cookie信息都在document.cookie中存放著，是一個(gè)字符串，里面的cookie以分號(hào)和空格分隔。就像這樣：

'key1=value1; key2=value2; key3=value3'// 使用document.cookie 來(lái)獲取所有cookiedocuemnt.cookie = 'id='+value

操作cookie

/** * 設(shè)置cookie值 * * @param {String} name cookie名稱 * @param {String} value cookie值 * @param {Number} expiredays 過(guò)期時(shí)間，天數(shù) */ function setCookie (name, value, expiredays) { let exdate = new Date() //setDate獲取N天后的日期 exdate.setDate(exdate.getDate() + expiredays) //getDate() 獲取當(dāng)前月份的日 + 過(guò)期天數(shù) document.cookie =name+'='+encodeURI(value)+';path=/;expires='+exdate.toLocaleString() } /** * 獲取cookie值 * @param {String} name cookie名稱 */ function getCookie (name) { var arr = document.cookie.split(';') //轉(zhuǎn)換數(shù)組 //['_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, value, 1) //設(shè)置cookie return getCookie(name).includes(value) //includes 判斷數(shù)組name中是否含有當(dāng)前value(返回true or false) }

好了了解了cookie我們開始如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的記住密碼功能

HTML代碼

<el-form :model='ruleForm' :rules='rules' status-icon ref='ruleForm' label-position='left' label- class='demo-ruleForm login-page'> <h3 class='title'>系統(tǒng)登錄</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' @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: ’請(qǐng)輸入您的帳戶’, trigger: ’blur’}], password: [{required: true, message: ’請(qǐng)輸入您的密碼’, 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){ //賬號(hào)，密碼 ，過(guò)期的天數(shù) var exdate = new Date() console.log(c_name,c_pwd) exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天數(shù) 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 ^

總結(jié)

到此這篇關(guān)于前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能的文章就介紹到這了,更多相關(guān)vue+elementUI記住密碼內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！