vue3+js 实现记住密码功能

在Vue 3中实现记住密码功能，你可以使用localStorage或sessionStorage来在用户的浏览器中存储用户的登录信息。以下是一个简单的例子：

<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 setup>
import { ref, onMounted } from 'vue';
 
const loginForm = ref({
  username: '',
  password: ''
});
 
const rememberMe = ref(false);
 
onMounted(() => {
  const savedLogin = localStorage.getItem('loginInfo');
  if (savedLogin) {
    const { username, password } = JSON.parse(savedLogin);
    loginForm.value.username = username;
    loginForm.value.password = password;
    rememberMe.value = true;
  }
});
 
const login = () => {
  if (rememberMe.value) {
    localStorage.setItem('loginInfo', JSON.stringify(loginForm.value));
  } else {
    localStorage.removeItem('loginInfo');
  }
  // 登录逻辑...
};
</script>

在这个例子中，当用户勾选记住密码后，登录信息会被保存到localStorage中。当页面加载时，如果之前保存了登录信息，则自动填充表单。用户登录成功后，会根据rememberMe的值来决定是否保存登录信息。如果用户取消勾选记住密码，则会从localStorage中移除保存的登录信息。