vue中 登录页面记住密码功能怎么做
时间: 2024-02-15 07:04:45 浏览: 36
在Vue中实现登录页面记住密码功能的一般步骤如下:
1. 在登录页面的表单中添加一个“记住密码”的复选框。
2. 在用户勾选“记住密码”时,将用户名和密码存储在浏览器的localStorage或cookie中。
3. 在页面加载时,检查localStorage或cookie中是否存在用户名和密码,如果存在,则将它们填充到相应的表单中。
4. 在用户提交表单时,判断是否勾选了“记住密码”,如果勾选了,则将用户名和密码存储在localStorage或cookie中。
具体实现可以参考以下代码:
```html
<!-- 登录页面 -->
<template>
<form @submit.prevent="login">
<label>
用户名:
<input v-model="username" type="text">
</label>
<br>
<label>
密码:
<input v-model="password" type="password">
</label>
<br>
<label>
<input v-model="remember" type="checkbox">
记住密码
</label>
<br>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
remember: false
}
},
mounted() {
// 页面加载时,检查localStorage中是否有用户名和密码
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)
} else {
localStorage.removeItem('username')
localStorage.removeItem('password')
}
// 发送登录请求...
}
}
}
</script>
```
在上面的代码中,我们使用了localStorage来存储用户名和密码。如果你想使用cookie来存储,则可以使用js-cookie库来操作cookie。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)