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

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

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

Cookie

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

'key1=value1; key2=value2; key3=value3'// 使用document.cookie 來獲取所有cookiedocuemnt.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, value, 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- 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' @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記住密碼內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！