web前端开发 有登录用户名和密码 还有自动登录 用户名和密码登录成功跳转页面 相关代码
时间: 2023-08-08 20:14:12 浏览: 61
以下是一个简单的前端登录页面的示例代码,包含了用户名密码的登录以及自动登录功能。
HTML部分:
```html
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="remember-me">自动登录:</label>
<input type="checkbox" id="remember-me" name="remember-me"><br>
<input type="submit" value="登录">
</form>
```
在表单中添加了一个`remember-me`的复选框,用于勾选自动登录功能。
JavaScript部分:
```javascript
const loginForm = document.getElementById('login-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const rememberMeInput = document.getElementById('remember-me');
loginForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
const rememberMe = rememberMeInput.checked;
// 发送登录请求,获取响应数据
// ...
if (loginSuccess) {
if (rememberMe) {
// 设置自动登录状态,记录到本地存储
localStorage.setItem('autoLogin', 'true');
}
// 跳转到登录后的页面
location.href = 'home.html';
} else {
alert('登录失败,请检查用户名和密码是否正确!');
}
});
// 页面加载时检查自动登录状态
window.addEventListener('load', () => {
const autoLogin = localStorage.getItem('autoLogin');
if (autoLogin === 'true') {
// 已经设置了自动登录,直接跳转到登录后的页面
location.href = 'home.html';
}
});
```
JavaScript代码中,我们使用了`localStorage`来记录用户是否选择了自动登录。在表单提交时,如果勾选了自动登录,则将自动登录状态记录到本地存储中。在页面加载时,检查本地存储中是否存在自动登录状态,如果存在则直接跳转到登录后的页面。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)