[Uniapp]用户登录界面“记住密码”功能的实现方法

一、前言

        在使用Uniapp编写用户登录界面时，有必要增加的一大功能就是“记住密码”这一功能。“记住密码”功能允许用户在使用本机下次登录时，无需输入账号密码即可完成快速登陆。为实现这一功能，我们可以借助Uniapp提供的API接口中的数据缓存这一模块实现，现在让我们简单认识一下需要用到的模块。

uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，注意这是一个同步接口。，且会覆盖掉原来相同名字的key。借助该功能，我们可以将账号密码存储在本机中。

uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。借助这一功能，我们可以获取到本机存储的账号密码。

uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。借助该功能，我们可以实现“取消记住密码”

二、完整代码及最终成果展示

1.最终截图

可以看到，当我将记住密码的状态切换为“true”时，开发者工具的Application中的Storage已经成功存储记录好的账号密码。

2.完整代码

<template>
  <div>
    <form>
      <label for="username">账号:</label>
      <input v-model="username" type="text" id="username" name="username" />

      <label for="password">密码:</label>
      <input v-model="password" type="password" id="password" name="password" />

      <label for="remember">记住密码:</label>
      <input v-model="remember" type="checkbox" id="remember" name="remember" />

      <button type="button" @click="login">点我登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      remember: false,
    };
  },
  mounted() {
    // 检查本地存储中是否有记住的用户名和密码
    const savedUsername = uni.getStorageSync('username');
    const savedPassword = uni.getStorageSync('password');

    if (savedUsername && savedPassword) {
      this.username = savedUsername;
      this.password = savedPassword;
      this.remember = true;
    }
  },
  methods: {
    login() {
      // 假设这里进行登录验证，验证成功后保存用户名和密码到本地存储
      if (this.remember) {
        uni.setStorageSync('username', this.username);
        uni.setStorageSync('password', this.password);
      } else {
        // 如果用户未勾选“记住我”，清除本地存储中的用户名和密码
        uni.removeStorageSync('username');
        uni.removeStorageSync('password');
      }

      // 在这里可以添加登录逻辑，比如向服务器发起登录请求
      // ...

      // 这里只是演示，显示一个提示信息
      uni.showToast({
        title: 'Login successful!',
        icon: 'success',
      });
    },
  },
};
</script>

三、代码详解

<template>
  <div>
    <form>
      <label for="username">账号:</label>
      <input v-model="username" type="text" id="username" name="username" />

      <label for="password">密码:</label>
      <input v-model="password" type="password" id="password" name="password" />

      <label for="remember">记住密码:</label>
      <input v-model="remember" type="checkbox" id="remember" name="remember" />

      <button type="button" @click="login">点我登录</button>
    </form>
  </div>
</template>

        在template标签部分，我们简单编写了必要的部分，即账号输入框、密码输入框、记住密码选择框及登录按钮。

        对于记住密码这一模块，我是直接用input输入框控制是否记住密码，实际情况中可以编写“点击选择是否记住密码”形式。

    login() {
      // 假设这里进行登录验证，验证成功后保存用户名和密码到本地存储
      if (this.remember) {
        uni.setStorageSync('username', this.username);
        uni.setStorageSync('password', this.password);
      } else {
        // 如果用户未勾选“记住我”，清除本地存储中的用户名和密码
        uni.removeStorageSync('username');
        uni.removeStorageSync('password');
      }

      // 在这里可以添加登录逻辑，比如向服务器发起登录请求
      // ...

      // 这里只是演示，显示一个提示信息
      uni.showToast({
        title: 'Login successful!',
        icon: 'success',
      });
    },
 

        在登陆函数里，我编写了一个if判断语句。这样，在每次点击登录按钮时系统都会判断是否把用户输入的账号密码存储到stora中。

        如果用户想要“记住密码”，则会调用

        uni.setStorageSync('username', this.username);
        uni.setStorageSync('password', this.password);

        这两个语句，会把this.username变量的变量值存储在缓冲区中，缓冲区中对应的key值为username，实现把账号存储在缓冲区中。密码同理。

        若用户不想要“记住密码”,则这两个语句就会发挥作用。这两个语句会把storage中key值为username和password的内容清空，实现清空storage中记录的账号密码这一功能。

        uni.removeStorageSync('username');
        uni.removeStorageSync('password');

 mounted() {
    // 检查本地存储中是否有记住的用户名和密码
    const savedUsername = uni.getStorageSync('username');
    const savedPassword = uni.getStorageSync('password');

    if (savedUsername && savedPassword) {
      this.username = savedUsername;
      this.password = savedPassword;
      this.remember = true;
    }
  },

        const savedUsername = uni.getStorageSync('username');
        const savedPassword = uni.getStorageSync('password');

        这两个语句会从缓冲区中取出账号和密码，并赋值给saved开头的两个变量。

        如果缓冲区中确实存储了账号密码（用户确实点击了“记住密码”），则会通过if判断语句把账号密码赋值给username和password；否则不做操作。