怎样用vue让页面记住密码
时间: 2024-05-12 18:20:28 浏览: 11
1. 在登录页面添加一个“记住密码”的复选框,使用v-model绑定一个data中的rememberMe变量,表示用户是否勾选了“记住密码”选项。
2. 在用户登录成功后,判断是否勾选了“记住密码”选项,如果勾选了,则使用localStorage或cookie等方式将用户名和密码保存在本地存储中。
3. 在页面初始化时,判断本地存储中是否有保存的用户名和密码,如果有,则自动填充到用户名和密码输入框中。
以下是示例代码:
```html
<template>
<div>
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<label>
<input type="checkbox" v-model="rememberMe">
记住密码
</label>
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
rememberMe: false, // 默认不记住密码
};
},
mounted() {
// 页面初始化时,判断本地存储中是否有保存的用户名和密码
const savedUsername = localStorage.getItem('username');
const savedPassword = localStorage.getItem('password');
if (savedUsername && savedPassword) {
this.username = savedUsername;
this.password = savedPassword;
this.rememberMe = true;
}
},
methods: {
login() {
// 发送登录请求,登录成功后判断是否勾选了“记住密码”选项
if (this.rememberMe) {
// 如果勾选了,则将用户名和密码保存在本地存储中
localStorage.setItem('username', this.username);
localStorage.setItem('password', this.password);
} else {
// 如果没有勾选,则清除本地存储中保存的用户名和密码
localStorage.removeItem('username');
localStorage.removeItem('password');
}
// 其他登录操作
},
},
};
</script>
```