vue登录页面 记住密码,记住多组账号,账号相同的时候,自动输入其密码,并且取消记住密码,讲此账号删除,并且相同账号只能拿存一次,代码实现
时间: 2023-12-03 13:02:26 浏览: 33
下面是一个简单的 Vue 登录页面的代码实现,包括记住密码、多组账号、自动输入密码、删除账号等功能:
```
<template>
<div>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" />
</div>
<div>
<input type="checkbox" id="remember" v-model="remember" />
<label for="remember">记住密码</label>
</div>
<button type="button" @click="login">登录</button>
</form>
<ul>
<li v-for="(item, index) in accounts" :key="index">
<span>{{ item.username }}</span>
<button type="button" @click="removeAccount(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
remember: false,
accounts: [],
};
},
mounted() {
// 从本地存储中读取已经记住的账号列表
const accounts = JSON.parse(localStorage.getItem('accounts') || '[]');
this.accounts = accounts;
},
methods: {
login() {
// 将当前输入的账号和密码加入到本地存储中
const account = { username: this.username, password: this.password };
const accounts = [...this.accounts, account];
localStorage.setItem('accounts', JSON.stringify(accounts));
// 如果记住密码选项框被选中,则将账号和密码存储到本地存储中
if (this.remember) {
localStorage.setItem(this.username, this.password);
} else {
localStorage.removeItem(this.username);
}
},
removeAccount(index) {
// 从本地存储中删除该账号的密码
const account = this.accounts[index];
localStorage.removeItem(account.username);
// 删除已经被记住密码的相同账号
const accounts = this.accounts.filter((item) => item.username !== account.username);
localStorage.setItem('accounts', JSON.stringify(accounts));
this.accounts = accounts;
},
},
watch: {
username(value) {
// 如果本地存储中已经存在相同的键,则自动填充密码并取消“记住密码”选项框的选中状态
const password = localStorage.getItem(value);
if (password) {
this.password = password;
this.remember = false;
}
},
},
};
</script>
```
需要注意的是,上面的代码只是一个简单的实现,实际项目中可能需要考虑更多的安全性和用户体验问题。例如,密码应该加密存储,账号列表应该进行分页等等。