vue中 登录页面记住密码功能怎么做 用本地存储 代码实现
时间: 2023-12-23 18:05:01 浏览: 35
好的,下面给出一份 Vue 中使用本地存储实现记住密码功能的代码示例。
1. 在登录组件中添加复选框和绑定变量
```html
<template>
<div>
<input type="text" placeholder="请输入用户名" v-model="username">
<input type="password" placeholder="请输入密码" v-model="password">
<label><input type="checkbox" v-model="remember">记住密码</label>
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
remember: false // 添加一个变量来绑定复选框的状态
}
},
methods: {
login() {
// 登录逻辑
// 如果勾选了“记住密码”,则保存用户名和密码到本地存储中
if (this.remember) {
localStorage.setItem('username', this.username)
localStorage.setItem('password', this.password)
}
// 其他逻辑
}
}
}
</script>
```
2. 在登录组件中添加生命周期钩子函数来初始化用户名和密码
```html
<script>
export default {
data() {
return {
username: '',
password: '',
remember: false
}
},
created() {
// 在组件创建时,从本地存储中读取保存的用户名和密码
const username = localStorage.getItem('username')
const password = localStorage.getItem('password')
if (username && password) {
this.username = username
this.password = password
this.remember = true
}
},
methods: {
login() {
// 登录逻辑
// 如果勾选了“记住密码”,则保存用户名和密码到本地存储中
if (this.remember) {
localStorage.setItem('username', this.username)
localStorage.setItem('password', this.password)
}
// 其他逻辑
}
}
}
</script>
```
这样就完成了在 Vue 中使用本地存储实现记住密码功能的代码实现。需要注意的是,这份示例代码中并没有进行密码加密处理,实际应用中需要考虑到账号安全问题,避免敏感信息被泄露。