HTML realizes the function of remembering account and remembering password
Rendering:
1. Add remember account and remember password checkboxes to the page
<div class="remember" style="text-align: center;margin: 10px auto;">
<input type="checkbox" id="rem_username">记住账号
<input type="checkbox" id="rem_password">记住密码
</div>
2. Write js to monitor the username and password input box IDs
The document.querySelector user obtains a single element, and addEventListener monitors whether the multi-select box has changed and determines whether to fill in the user name and password.
<script type="text/javascript">
var u_name = document.querySelector('#username');
var u_pass = document.querySelector('#password');
var rem_username = document.querySelector('#rem_username');
var rem_password = document.querySelector('#rem_password');
if (localStorage.getItem('u_name')) {
u_name.value = (localStorage.getItem('u_name'))
rem_username.checked = true;
}
if (localStorage.getItem('u_pass')) {
u_pass.value = (localStorage.getItem('u_pass'))
rem_password.checked = true;
}
rem_username.addEventListener('change',function () {
if (this.checked) {
localStorage.setItem('u_name', u_name.value);
} else {
localStorage.removeItem('u_name');
}
})
rem_password.addEventListener('change',function () {
if (this.checked) {
localStorage.setItem('u_pass', u_name.value);
} else {
localStorage.removeItem('u_pass');
}
})
</script>