1、因项目需要，移动端需要进行记住密码，在此，将实现思路记录如下：这里有一个细节，就是移动端和PC端机制不同，因此所使用的存储机制也不同。这里使用的存储机制是localStorage。
<van-form><div class="vanRow" style=""><van-row class="vanInput" ><van-row><div class="fontSize"><van-fieldstyle="color: white;font-size: 16px"v-model="loginForm.username"name="username"label=""left-icon="manager-o"placeholder="请输入用户名或手机号":error="false":rules="[{ required: true, message: '请填写用户名或手机号' }]" clearable /><van-fieldstyle="color: white;font-size: 16px"v-model="loginForm.password":type="passType"name="password"v-show="showPsw"label=""left-icon="goods-collect-o"placeholder="请输入密码":error="false":rules="[{ required: true, message: '请填写密码' }]"@click-right-icon="showPassword"><template #right-icon><van-icon :name="passIcon" color="#E8F0FE"></van-icon></template></van-field><van-checkbox class="vancheck"style="height:40px;margin: 4px 15px;font-size: 15px;"v-model="loginForm.rememberMe"name = 'rememberMe' shape="square">记住密码</van-checkbox></div></van-row></van-row></div><van-row class="login_box"><van-col :span="24" ><div class="login_box_font"><van-button @click="login" type="info" class="btn-login" style="mso-border-shadow: yes;font-size: 20px;width: 60%" color="#3572FF">登 录</van-button></div></van-col></van-row></van-form>
return {loginForm: {username: "",password: "",rememberMe: false,code: "",uuid: ""},}},
created() {if(!!localStorage.getItem("rememberMe") &&localStorage.getItem("rememberMe") =='true'){this.getrememberPassword();}},
在methods中写入记住密码方法：
getrememberPassword() {this.loginForm = {username:!!localStorage.getItem("username")?localStorage.getItem("username"):'',password:!!localStorage.getItem("password")?localStorage.getItem("password"):'',rememberMe:!!localStorage.getItem("rememberMe")?localStorage.getItem("rememberMe"):false};},//登录login(value) {let _this = this;let param ={username: _this.loginForm.username,password: _this.loginForm.password};requestLogin(param).then(res => {if(res.code == 200){Toast({message: '登录成功',})localStorage.setItem('token', res.token);if (this.loginForm.rememberMe) {localStorage.setItem("username", this.loginForm.username, {expires: 30});localStorage.setItem("password",this.loginForm.password,{expires: 30});localStorage.setItem("rememberMe", this.loginForm.rememberMe, {expires: 30});} else {localStorage.removeItem("username");localStorage.removeItem("password");localStorage.removeItem("rememberMe");}_this.$router.push({path: '/index'});}else{Toast({message: '用户名或密码错误，登录失败',})}});},
如果觉得《Vue+vant实现移动端记住密码功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
