如何使用Vue.js实现记住用户名和密码的复选框功能？

没问题，我来帮你搞定这个功能！其实核心思路就是利用浏览器的localStorage来持久化存储用户的登录信息，结合Vue的生命周期钩子和双向绑定来实现自动填充和存储逻辑。下面我会一步步修改你的代码，并解释每个部分的工作原理。

第一步：修正复选框的双向绑定 #

你的复选框目前用@click触发方法，这不符合Vue的双向绑定思路，我们直接用v-model绑定remember_me变量，这样复选框的状态会自动和data里的remember_me同步：

修改后的HTML部分：

<div class="field">
  <label for="checkbox">Remember me</label>
  <input type="checkbox" id="checkbox" v-model="remember_me"> 
</div>

第二步：页面加载时自动填充已保存的信息 #

我们需要在组件创建完成后，检查浏览器的localStorage里有没有之前保存的用户信息，如果有就自动填充到输入框中。这可以通过Vue的created生命周期钩子实现：

第三步：登录时根据复选框状态存储/清除信息 #

登录成功后，根据remember_me的状态决定是否把用户信息存入localStorage，如果用户取消了“记住我”，还要清除之前存储的内容。

修改后的完整Vue代码：

<script>
import axios from 'axios'
export default {
  name: 'Login',
  data () {
    return {
      user: {
        username: null,
        password: null
      },
      remember_me: false // 初始设为false，更符合默认逻辑
    }
  },
  created() {
    // 组件创建时读取localStorage中的用户信息
    const savedUser = localStorage.getItem('rememberedUser')
    if (savedUser) {
      const parsedUser = JSON.parse(savedUser)
      this.user.username = parsedUser.username
      this.user.password = parsedUser.password
      this.remember_me = true // 有保存信息的话，自动勾选复选框
    }
  },
  methods: {
    login: function () {
      var vm = this
      console.log('logging in...')
      axios.get('http://localhost:8080', {
        params: {
          username: vm.user.username,
          password: vm.user.password
        }
      }).then((result) => {
        console.log(result)
        // 登录成功后处理存储逻辑
        if (this.remember_me) {
          // 将用户信息转为JSON字符串存入localStorage
          localStorage.setItem('rememberedUser', JSON.stringify(this.user))
        } else {
          // 取消记住的话，清除存储的信息
          localStorage.removeItem('rememberedUser')
        }
        this.$router.push({ name: 'bank_accounts' })
      }).catch((error) => {
        console.log(error)
      })
    },
    linkRegister: function () {
      this.$router.push({name: 'register'})
    }
  }
}
</script>

工作原理详解 #

1. localStorage 作用：这是浏览器提供的持久化存储API，存储的内容不会因为页面刷新或浏览器关闭而丢失（除非用户手动清除浏览器缓存或我们通过代码删除），非常适合保存“记住我”的信息。
2. created 钩子：Vue组件创建完成后立即执行这个钩子，我们在这里读取localStorage中的数据，实现页面加载时自动填充用户名和密码。
3. 双向绑定(v-model)：复选框通过v-model="remember_me"和data中的变量绑定，复选框的勾选状态会自动同步到remember_me变量，不用手动处理点击事件。
4. 登录后的存储逻辑：登录成功后，如果remember_me为true，就把用户对象转为JSON字符串（因为localStorage只能存字符串）存入；如果为false，就移除之前存储的信息，避免下次自动填充。

注意事项 #

• 安全性提示：localStorage是明文存储数据的，在生产环境中直接存储密码有安全风险，建议只存储用户名，或者对密码进行加密后再存储。
• 隐私问题：如果是公共设备，“记住我”功能可能会导致其他用户直接登录，所以要提醒用户在公共设备上不要勾选。

内容的提问来源于stack exchange，提问作者Axel