uniapp 实现前端记住密码功能 - 详细步骤及代码示例

在 uniapp 中实现前端记住密码功能，可以通过以下步骤完成：

1. 在登录页面中添加一个复选框，用于用户选择是否记住密码。

2. 在用户勾选记住密码时，将用户名和密码保存在本地存储中。

3. 在下一次登录时，如果本地存储中存在用户名和密码，则自动填充登录表单，并勾选记住密码复选框。

4. 在用户退出登录或清除浏览器缓存时，清除本地存储中保存的用户名和密码。

以下是示例代码：

1. 在登录页面中添加一个复选框

<template>
  <view>
    <input type='text' v-model='username' placeholder='用户名' />
    <input type='password' v-model='password' placeholder='密码' />
    <input type='checkbox' v-model='remember' />记住密码
    <button @click='login'>登录</button>
  </view>
</template>

2. 保存用户名和密码到本地存储中

export default {
  data() {
    return {
      username: '',
      password: '',
      remember: false,
    };
  },
  methods: {
    login() {
      // 登录逻辑
      if (this.remember) {
        // 保存用户名和密码到本地存储
        uni.setStorageSync('username', this.username);
        uni.setStorageSync('password', this.password);
      }
    },
  },
};

3. 自动填充登录表单

export default {
  data() {
    return {
      username: '',
      password: '',
      remember: false,
    };
  },
  onShow() {
    // 页面显示时，自动填充用户名和密码
    const username = uni.getStorageSync('username');
    const password = uni.getStorageSync('password');
    if (username && password) {
      this.username = username;
      this.password = password;
      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');
      }
    },
  },
};

4. 清除本地存储中保存的用户名和密码

export default {
  data() {
    return {
      username: '',
      password: '',
      remember: false,
    };
  },
  onUnload() {
    // 页面卸载时，清除本地存储中的用户名和密码
    uni.removeStorageSync('username');
    uni.removeStorageSync('password');
  },
  methods: {
    login() {
      // 登录逻辑
      if (this.remember) {
        // 保存用户名和密码到本地存储
        uni.setStorageSync('username', this.username);
        uni.setStorageSync('password', this.password);
      } else {
        // 清除本地存储中的用户名和密码
        uni.removeStorageSync('username');
        uni.removeStorageSync('password');
      }
    },
  },
};