用户如果选择"记住密码”,系统会自动将密码保存在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>