【uni-app2.0】实现登录页记住密码功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了【uni-app2.0】实现登录页记住密码功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用uni-app的uni.setStorageSync()和uni.getStorageSync()方法来存储和读取密码文章来源地址https://www.toymoban.com/news/detail-610385.html

在登录页中添加一个记住密码的u-checkbox选项，并在data里面添加一个rememberPwd的布尔值，在每次点击记住密码change的时候来记录用户的选择

	<u-checkbox-group placement="column">
	  <u-checkbox
	    v-model="rememberPwd"
	    @change="rememberChange"
	    :checked="rememberPwd"
	    label="记住密码"
	    name="yes"
	  >
	  </u-checkbox>
	</u-checkbox-group>

	data() {
	  return {
	    loginForm: {
	      username: "",
	      password: "",
	    },
	    rememberPwd: false,
	  };
	},
	methods: {
	  rememberChange(i) {
	    this.rememberPwd = i;
	  },
	}

在点击登录按钮执行的事件中，使用uni.setStorageSync()方法将【用户名、密码、记住密码】存储在本地缓存中

	// 登录逻辑后
	if (this.rememberPwd) {
	  uni.setStorageSync("HBremember", this.rememberPwd);
	  uni.setStorageSync("HBusername", this.loginForm.username);
	  uni.setStorageSync("HBpassword", this.loginForm.password);
	} else {
	  // 销毁缓存中的账号、密码
	  uni.removeStorageSync("HBremember");
	  uni.removeStorageSync("HBusername");
	  uni.removeStorageSync("HBpassword");
	}
	// 再进行跳转等动作

在登录页的onLoad事件中，使用uni.getStorageSync()方法检查本地缓存中是否存储了rememberPwd的值，如果存储了，则将它赋值给rememberPwd的属性，再取和赋值用户名和密码

  onLoad() {
    //取出缓存中的账号、密码
    const HBremember = uni.getStorageSync("HBremember");
    const HBusername = uni.getStorageSync("HBusername");
    const HBpassword = uni.getStorageSync("HBpassword");
    if (HBremember && HBusername && HBpassword) {
      this.loginForm.username = HBusername;
      this.loginForm.password = HBpassword;
      this.rememberPwd = HBremember;
    }
  },