用户如果选择"记住密码”,系统会自动将密码保存在localStorage,不选择就会自动清除。
代码实现:
html


    <label for="">
        用户名: <input type="text" class="userName"/>
    </label>
    <br/><br/>
    <label for="">
        密 码: <input type="password" class="pwd"/>
    </label>
    <br/><br/>
    <label for="">
        <input type="checkbox" class="ckb"/>
        记住密码
    </label>
    <br/><br/>
    <button>登录</button>

javascript

<script>
    var userName=document.querySelector('.userName');
    var pwd=document.querySelector('.pwd');
    var sub=document.querySelector('button');
    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){
//        如果记住密码 被选中存储,用户信息
        if(ckb.checked){
            window.localStorage.setItem('userName',userName.value);
            window.localStorage.setItem('pwd',pwd.value);
        }else{
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }
//        否则清除用户信息
    }

    window.onload=function(){
//        当页面加载完成后,获取用户名,密码,填充表单
        userName.value=window.localStorage.getItem('userName');
        pwd.value=window.localStorage.getItem('pwd');
    }
</script>
Last modification:July 12th, 2018 at 03:21 pm
If you think my article is useful to you, please feel free to appreciate