js实现记住用户名
时间: 2023-09-16 21:11:55 浏览: 51
可以使用浏览器的本地存储(localStorage)来实现记住用户名的功能。当用户输入用户名时,将其存储在localStorage中,在下一次用户访问页面时,再从localStorage中获取用户名并填充到用户名输入框中。
以下是一个简单的示例代码:
```javascript
// 保存用户名到localStorage
localStorage.setItem('username', 'user123');
// 获取用户名
var username = localStorage.getItem('username');
// 填充用户名到输入框
document.getElementById('username-input').value = username;
```
在实际应用中,需要根据具体需求来判断何时保存和获取用户名,以及如何处理用户退出登录等情况。
相关问题
js实现记住用户名完整代码
以下是一个完整的示例代码,实现了记住用户名和清除记住的用户名的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>记住用户名示例</title>
</head>
<body>
<label for="username-input">用户名:</label>
<input type="text" id="username-input" name="username"><br><br>
<label for="remember-checkbox">记住用户名:</label>
<input type="checkbox" id="remember-checkbox" name="remember"><br><br>
<button id="submit-button">登录</button>
<button id="clear-button">清除记住的用户名</button>
<script>
// 获取页面元素
var usernameInput = document.getElementById('username-input');
var rememberCheckbox = document.getElementById('remember-checkbox');
var submitButton = document.getElementById('submit-button');
var clearButton = document.getElementById('clear-button');
// 当页面加载时,从localStorage中获取已保存的用户名
var savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
rememberCheckbox.checked = true;
}
// 当用户点击登录按钮时,根据是否勾选记住用户名来保存用户名
submitButton.addEventListener('click', function() {
if (rememberCheckbox.checked) {
localStorage.setItem('username', usernameInput.value);
} else {
localStorage.removeItem('username');
}
// TODO: 处理登录逻辑
});
// 当用户点击清除记住的用户名按钮时,清除localStorage中保存的用户名
clearButton.addEventListener('click', function() {
localStorage.removeItem('username');
usernameInput.value = '';
rememberCheckbox.checked = false;
});
</script>
</body>
</html>
```
在这个示例中,当用户输入用户名和勾选记住用户名后,点击登录按钮会将用户名保存到localStorage中。在下一次用户访问页面时,会自动填充上次保存的用户名到输入框中。如果用户想要清除记住的用户名,可以点击清除记住的用户名按钮。
js实现html记住用户名完整代码
以下是一个完整的示例代码,实现了记住用户名和清除记住的用户名的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>记住用户名示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<label for="username-input">用户名:</label>
<input type="text" id="username-input" name="username"><br><br>
<label for="remember-checkbox">记住用户名:</label>
<input type="checkbox" id="remember-checkbox" name="remember"><br><br>
<button id="submit-button">登录</button>
<button id="clear-button">清除记住的用户名</button>
<script>
// 获取页面元素
var usernameInput = document.getElementById('username-input');
var rememberCheckbox = document.getElementById('remember-checkbox');
var submitButton = document.getElementById('submit-button');
var clearButton = document.getElementById('clear-button');
// 当页面加载时,从localStorage中获取已保存的用户名
var savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
rememberCheckbox.checked = true;
}
// 当用户点击登录按钮时,根据是否勾选记住用户名来保存用户名
submitButton.addEventListener('click', function() {
if (rememberCheckbox.checked) {
localStorage.setItem('username', usernameInput.value);
} else {
localStorage.removeItem('username');
}
// TODO: 处理登录逻辑
});
// 当用户点击清除记住的用户名按钮时,清除localStorage中保存的用户名
clearButton.addEventListener('click', function() {
localStorage.removeItem('username');
usernameInput.value = '';
rememberCheckbox.checked = false;
});
</script>
</body>
</html>
```
在这个示例中,当用户输入用户名和勾选记住用户名后,点击登录按钮会将用户名保存到localStorage中。在下一次用户访问页面时,会自动填充上次保存的用户名到输入框中。如果用户想要清除记住的用户名,可以点击清除记住的用户名按钮。
相关推荐
![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)