[JavaScript知识库]Vue+vant实现移动端记住密码功能

1、因项目需要，移动端需要进行记住密码，在此，将实现思路记录如下：这里有一个细节，就是移动端和PC端机制不同，因此所使用的存储机制也不同。这里使用的存储机制是localStorage。

<van-form>
          <div class="vanRow" style="">
            <van-row class="vanInput" >
              <van-row>
                <div class="fontSize">
                  <van-field
                    style="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-field
                    style="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: '用户名或密码错误，登录失败',
              })
            }
        });
      },