利用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>
					<!-- <image class="login-btn" src="../../static/login-btn.png" @tap="trunToIndex"></image> -->
					<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>

实现的效果是：当我们勾选“记住用户名密码”的时候，登录之后，就会在本地存储用户名密码，如果登录的时候没有勾选“记住用户名密码”，就会清除之前本地存储的用户名及密码，并且页面用户名和密码置空