前言
实际开发中,为了方便用户进行登录以及为了用户的体验感,在密码框下常常会添加一个复选框用作记住账号密码。话不多说,直接步入主题。
核心代码
HTML
<u-form-item prop="rememberPsw"> <u-checkbox-group> <u-checkbox v-model="loginForm.rememberPsw" shape="circle" @change="loginForm.rememberPsw=!loginForm.rememberPsw" label="记住账号密码"></u-checkbox> </u-checkbox-group> </u-form-item>
JS
data() { return { loginForm: { rememberPsw: true, } } }, mounted() { //页面加载完成,获取本地存储的账号及密码 const Phone = uni.getStorageSync('Phone');//我这边是通过手机号进行登录 const userPwd = uni.getStorageSync('userPwd'); if (Phone && userPwd) { this.loginForm.Phone = Phone; this.loginForm.userPwd = userPwd; } else { this.loginForm.Phone = ""; this.loginForm.userPwd = ""; } }, methods: { //写在OBJECT参数名是success的登录请求里面 if (!this.loginForm.rememberPsw) { //用户勾选“记住密码” console.log("记住密码") uni.setStorageSync('Phone', this.loginForm.Phone); uni.setStorageSync('userPwd', this.loginForm.userPwd); } else { //用户没有勾选“记住密码” console.log("没有记住密码") uni.removeStorageSync('Phone'); uni.removeStorageSync('userPwd'); his.loginForm.Phone = ""; this.loginForm.userPwd = ""; } }
当你退出登录后,重新登录时就会发现账号和密码已经出现在输入框中。