vue 记住密码怎么实现

在Vue中实现记住密码功能，通常需要结合localStorage或者cookie来实现。以下是一个简单的例子，展示了如何使用localStorage来记住用户的登录信息：

<template>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="Username">
    <input type="password" v-model="loginForm.password" placeholder="Password">
    <label>
      <input type="checkbox" v-model="rememberMe"> Remember Me
    </label>
    <button @click="login">Login</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rememberMe: false
    };
  },
  created() {
    this.loadSavedLogin();
  },
  methods: {
    login() {
      if (this.rememberMe) {
        localStorage.setItem('login', JSON.stringify(this.loginForm));
        localStorage.setItem('rememberMe', true);
      } else {
        localStorage.removeItem('login');
        localStorage.removeItem('rememberMe');
      }
      // 登录逻辑...
    },
    loadSavedLogin() {
      const savedLogin = localStorage.getItem('login');
      if (savedLogin) {
        this.loginForm = JSON.parse(savedLogin);
        this.rememberMe = localStorage.getItem('rememberMe') === 'true';
      }
    }
  }
};
</script>

在这个例子中，我们定义了一个rememberMe复选框，当用户选中时，loginForm中的用户名和密码会被保存到localStorage中。当页面加载时，created钩子函数会调用loadSavedLogin方法来尝试加载记住的登录信息。如果用户取消选中记住密码，则会清除保存的信息。