【htmlはアカウントとパスワードを記憶する機能を実現します】

HTMLはアカウントとパスワードを記憶する機能を実現します

レンダリング：

1. ページに「アカウントを記憶する」チェックボックスと「パスワードを記憶する」チェックボックスを追加します。

<div class="remember" style="text-align: center;margin: 10px auto;">
    <input type="checkbox" id="rem_username">记住账号
    <input type="checkbox" id="rem_password">记住密码
</div>

2. ユーザー名とパスワードの入力ボックス ID を監視するための js を作成します。

  document.querySelector ユーザーは単一の要素を取得し、addEventListener は複数選択ボックスが変更されたかどうかを監視し、ユーザー名とパスワードを入力するかどうかを決定します。

<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>