用localStorage實現(xiàn)登錄時記住密碼的功能

HTNL代碼片段

<el-input v-model="ruleForm.user" placeholder="請輸入賬號" @input='inputPassword' autocomplete="off"></el-input><el-input type="password" v-model="ruleForm.password" @input='clearFunc' show-password placeholder="請輸入密碼" prefix-icon="el-icon-lock" autocomplete="off"></el-input><el-checkbox v-model="checked">記住密碼</el-checkbox> <el-button type="primary" @click="submitForm" :loading="isLoading">登錄</el-button>

js代碼

export default {name: "login",data() {return {ruleForm: {user: '',password: '',},isLoading:false,loginSwicth:true,checked:false,allUser:[]};},methods: {submitForm() { //點擊登錄if(this.ruleForm.user && this.ruleForm.password){this.isLoading = true;let params = {account:this.ruleForm.user,password:this.ruleForm.password}//后端請求時......if (this.checked) { var userInfo = {userName:this.ruleForm.user,password:this.ruleForm.password}this.allUser.push(userInfo);var userStr = JSON.stringify(this.allUser);localStorage.setItem("user" , userStr);}else{this.deletData()} }else{this.$message({message: "請輸入賬號和密碼！",type: "warning",duration: 1500});}},inputPassword(){ //輸入賬號for (let i of this.allUser) {if(this.ruleForm.user == i.userName){this.ruleForm.password = i.password;this.$nextTick(() => {this.checked = true;})}else{this.checked = false;}}},clearFunc(){ //輸入密碼if( this.ruleForm.user == '' || this.ruleForm.password == ''){this.checked = false;} },saveData(){ // localStorage保存數(shù)據(jù)if(localStorage.getItem("user")){var objUser = JSON.parse(localStorage.getItem("user"));for (let i of objUser) {this.allUser.push(i)}this.allUser = this.unique(objUser)var userStr = JSON.stringify(this.allUser);localStorage.setItem("user" , userStr);}}, deletData(){ //刪除數(shù)據(jù)for (let i of this.allUser) {if(this.ruleForm.user == i.userName && this.checked == false){this.allUser.pop(i)var userStr = JSON.stringify(this.allUser);localStorage.setItem("user" , userStr);}}},unique(arr) { //去重var unique = {};var newArr = [];arr.forEach(function(gpa) {unique[JSON.stringify(gpa)] = gpa});newArr = Object.keys(unique).map(function(u) {return JSON.parse(u)});return newArr},} };

總結(jié)

以上是生活随笔為你收集整理的用localStorage实现登录时记住密码的功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。