如何实现登录界面中选择记住密码和自动登录选项的存储数据?
要求:
- 输入用户名和密码后选中自动登录,并点击登录后,弹出登录成功。页面关闭后下次进来,用户名和密码都在,并且自动登录默认已选中,然后直接弹出登录成功。如果进来后把自动登录又取消选中,页面关闭后再次进来,用户名和密码不展示,并且自动登录不选中 。
- 输入用户名和密码后选中记住密码,并点击登录后,弹出登录成功。页面关闭后下次进来,用户名和密码都在,并且记住密码默认已选中,这是只有点击登录时才会弹出登录成功。如果进来后把记住密码又取消选中,页面关闭后再次进来,用户名和密码不展示,并且记住密码不选中。
- 输入用户名和密码后选中记住密码和自动登录,点击登录后,弹出登录成功。页面关闭后下次进来,用户名和密码都在,并且自动登录和记住密码默认已选中,然后直接弹出登录成功。
运行代码部分: 基于InsCode
HTML主体部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required><br><br>
<input type="checkbox" id="autoLogin" name="autoLogin">自动登录
<input type="checkbox" id="remember" name="remember">记住密码
<br>
<br>
<button onclick="login()">登录</button>
</form>
</body>
</html>
CSS样式部分:
form {
width: 300px;
height: 300px;
margin: 100px auto;
}
JS部分 :
<script>
// 获取本地存储的数据
let username = localStorage.getItem('username')
let password = localStorage.getItem('password')
// 两个都存在,赋值给用户名和密码输入框
if (username && password) {
document.getElementById('username').value = username
document.getElementById('password').value = password
let autoLoginCheckbox = document.getElementById('autoLogin')
if (localStorage.getItem('autoLogin')) {
autoLoginCheckbox.checked = true
}
let rememberCheckbox = document.getElementById('remember')
if (localStorage.getItem('remember')) {
rememberCheckbox.checked = true
}
}
// 初始化时如果检查到自动登录勾选,自动执行登录
window.onload = function () {
if (localStorage.getItem('autoLogin')) {
login()
}
}
// 定义函数button按钮的点击执行登录
function login() {
let usernameValue = document.getElementById('username').value
let passwordValue = document.getElementById('password').value
let autoLogin = document.getElementById('autoLogin').checked
let remember = document.getElementById('remember').checked
// if语句判断两个输入框内容是否存在
if (usernameValue && passwordValue) {
if (autoLogin) {
localStorage.setItem('username', usernameValue)
localStorage.setItem('password', passwordValue)
localStorage.setItem('autoLogin', 'true')
}
if (!autoLogin) {
localStorage.removeItem('autoLogin')
}
if (remember) {
localStorage.setItem('username', usernameValue)
localStorage.setItem('password', passwordValue)
localStorage.setItem('remember', 'true')
}
if (!remember) {
localStorage.removeItem('remember')
}
if (!autoLogin && !remember) {
localStorage.clear()
}
alert('登录成功')
window.close()//关闭窗口
} else {
alert('请重新登录')
}
}
</script>
说明:
如有其他需求,请各位自己完善。