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

电玩女神 2022-03-21 08:00 1556阅读 0赞

<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>

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

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]: /images/20220321/60ed780b357249a1a6744be66fe5139b.png