[Uniapp]用户登录界面记住多个账号密码功能的实现方法

一、前言

        在前一篇博客中，我们成功实现了用户登陆界面“记住密码”功能的实现，但是这样限制较大，即每台机子只能实现对一组账号密码的存储，如果存储第二组，则会把第一组的内容覆盖掉。在本篇文章中，我们将实现一台机子同时记住多个账号密码这一功能。

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

1.截图展示

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>

      <select v-model="selectedAccount" @change="selectAccount">
		  记住的账号密码
        <option v-for="account in savedAccounts" :key="account.username" :value="account.username">
          {{ account.username }}
        </option>
      </select>
	  
	  <button type="button" @click="deleteAccount">删除账户</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      remember: false,
      savedAccounts: [],
      selectedAccount: '',
    };
  },
  mounted() {
    const savedAccounts = uni.getStorageSync('savedAccounts');

    if (savedAccounts) {
      this.savedAccounts = savedAccounts;
    }
  },
  methods: {
    login() {
      if (this.remember) {
        // 检查是否已经保存过相同的账号，如果是，则更新密码
        const existingAccountIndex = this.savedAccounts.findIndex(
          (account) => account.username === this.username
        );

        if (existingAccountIndex !== -1) {
          this.savedAccounts[existingAccountIndex].password = this.password;
        } else {
          // 否则，保存当前输入的账号密码到数组
          this.savedAccounts.push({
            username: this.username,
            password: this.password,
          });
        }

        // 保存数组到本地存储
        uni.setStorageSync('savedAccounts', this.savedAccounts);
      }

      // 在这里可以添加登录逻辑，比如向服务器发起登录请求
      // 使用this.selectedAccount来获取选择的账号
      // ...

      // 这里只是演示，显示一个提示信息
      uni.showToast({
        title: 'Login successful!',
        icon: 'success',
      });
    },
    selectAccount() {
      // 选择已保存的账号时，将对应的密码填充到输入框
      const selectedAccount = this.savedAccounts.find(
        (account) => account.username === this.selectedAccount
      );

      if (selectedAccount) {
        this.username = selectedAccount.username;
        this.password = selectedAccount.password;
      }
    },
    deleteAccount() {
      // 删除已保存的账号密码
      const indexToDelete = this.savedAccounts.findIndex(
        (account) => account.username === this.selectedAccount
      );

      if (indexToDelete !== -1) {
        this.savedAccounts.splice(indexToDelete, 1);

        // 更新本地存储
        uni.setStorageSync('savedAccounts', this.savedAccounts);

        // 清空选择的账号和密码输入框
        this.selectedAccount = '';
        this.username = '';
        this.password = '';
      }
    },
  },
};
</script>