利用uni-app实现记住账号密码的功能

<template>
   <view class="content">
       <view class="login-image-content">
           <image class="login-bg" src="../../static/login-bg.jpg"></image>
           <view class="login-container">
               <view class="login-box">
                   <image class="login-logo" src="../../static/logo.png"></image>
                   <view class="inp phone-num">
                       <view class="youqige-iconfont icon-gerenzhongxin login-icon"></view>
                       <input class="user-name-inp" type="text" placeholder-style="color: #c1c1c1;" placeholder="输入用户名或手机号" v-model="user.loginname" />
                   </view>
                   <view class="inp password">
                       <view class="youqige-iconfont icon-mima login-icon"></view>
                       <input type="text" password="true" placeholder-style="color: #c1c1c1;" placeholder="输入密码" v-model="user.password"/>
                   </view>
                   
                   <button type="primary" hover-class="button-hover" class="login-btn" @tap="trunToIndex">登录</button>
                   
                   <view class="remember-psw">
                       <checkbox-group>
                           <label><checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86"/>记住账号密码</label>
                       </checkbox-group>
                   </view>
                   <view class="login-tip">
                       <text @tap="turnToForget">忘记密码</text><text>|</text><text @tap="turnToRegister">立即注册</text>
                   </view>
               </view>
           </view>
       </view>
   </view>
</template>

<script>
   export default {
       data() {
           return {
               user: {
                   loginname: '',
                   password: ''
               },
               rememberPsw: true
           }
       },
       mounted() {
           let that = this;
           //页面加载完成，获取本地存储的用户名及密码
           const userName = uni.getStorageSync('userName');
           const userPsw = uni.getStorageSync('userPsw');
           if(userName && userPsw){
               that.user.loginname = userName;
               that.user.password = userPsw;
           }else{
               that.user.loginname = "";
               that.user.password = "";
           }

       },
       methods: {
           //跳转到忘记密码
           turnToForget() {
               uni.navigateTo({url: '../forget/forget'});
           },
           //跳转到注册
           turnToRegister() {
               uni.navigateTo({url: '../register/register'});
           },
           trunToIndex(){
               const that = this;

               uni.showLoading({title:'努力登录中...', mask:true});
               that.$api.login(that.user, (msg)=>{
                   if(msg){
                       uni.showToast({title: msg, icon:'none'});
                   } else {
                       //登录成功获取用户信息
                       that.$api.getUserInfo(function(msg){
                           uni.hideLoading();
                           if(msg){
                               uni.showToast({title: msg, icon: 'none'});
                           } else {
                               uni.redirectTo({url: '../index/index'});
                           }
                       });

                       //登录成功将用户名密码存储到用户本地
                       if(that.rememberPsw){//用户勾选“记住密码”
                           uni.setStorageSync('userName', that.user.loginname);
                           uni.setStorageSync('userPsw', that.user.password);
                       }else{//用户没有勾选“记住密码”
                           uni.removeStorageSync('userName');
                           uni.removeStorageSync('userPsw');
                           that.user.loginname = "";
                           that.user.password = "";
                       }
                   }
               })
           }
       }
   }
</script>