vue中 登录页面记住密码功能怎么做,记住所有的登录过的账号,并且登录过的账号,自动输入密码,代码实现
时间: 2024-02-15 21:04:47 浏览: 35
实现记住所有登录过的账号并自动填充密码,我们需要将用户名和密码存储在一个数组或对象中,然后使用localStorage或cookie来保存该数组或对象。
以下是实现的一般步骤:
1. 在登录页面的表单中添加一个“记住密码”的复选框。
2. 在用户勾选“记住密码”时,将用户名和密码存储在一个数组或对象中。
3. 在页面加载时,从localStorage或cookie中获取保存的数组或对象,并将其填充到一个变量中。
4. 在表单中添加一个下拉框,用于选择已经登录过的账号。
5. 当用户选择一个账号时,将该账号对应的密码填充到密码输入框中。
具体实现可以参考以下代码:
```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>
<label>
已登录过的账号:
<select v-model="selectedUsername">
<option value="">请选择账号</option>
<option v-for="username in savedAccounts" :value="username">{{ username }}</option>
</select>
</label>
<br>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
remember: false,
savedAccounts: [], // 保存已登录过的账号
selectedUsername: '' // 当前选择的账号
}
},
mounted() {
// 页面加载时,从localStorage中获取已保存的账号
const savedAccounts = JSON.parse(localStorage.getItem('savedAccounts') || '[]')
this.savedAccounts = savedAccounts
},
methods: {
login() {
// 将用户名和密码存储到数组中
if (this.remember) {
const account = { username: this.username, password: this.password }
this.savedAccounts.push(account)
localStorage.setItem('savedAccounts', JSON.stringify(this.savedAccounts))
}
// 发送登录请求...
}
},
watch: {
// 监听选择的账号变化,将密码填充到密码输入框中
selectedUsername(username) {
const account = this.savedAccounts.find(a => a.username === username)
if (account) {
this.password = account.password
}
}
}
}
</script>
```
在上面的代码中,我们使用了一个数组savedAccounts来保存已登录过的账号和密码。在用户勾选“记住密码”时,将用户名和密码存储到该数组中,并将该数组保存到localStorage中。在页面加载时,从localStorage中获取该数组,并将其填充到savedAccounts变量中。在表单中添加了一个下拉框,用于选择已经登录过的账号。当用户选择一个账号时,将该账号对应的密码填充到密码输入框中。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.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)