js实现记住用户名/密码存储本地localStorage
发布时间:2022-04-20 17:20:17
作者:泸州科技
来源:本站
浏览量(104)
摘要:场景:在做用户登录用户名、密码的时候,有记住用户名复选框。效果:当用户点击记住:用户名。那么下次打开网页,会记住用户名。当用户未勾选:记住用户名,则不会保存到文本框。实现过程:第一步:监听:checkbox复选框的change事件。如果勾选:那么将文本框的内容存储---》本地存储。否则:移除本地已存储的用户名第二步:
场景:在做用户登录用户名、密码的时候,有记住用户名复选框。
效果:当用户点击记住:用户名。那么下次打开网页,会记住用户名。当用户未勾选:记住用户名,则不会保存到文本框。
实现过程:
第一步:监听:checkbox复选框的change事件。
如果勾选:那么将文本框的内容存储---》本地存储。
否则:移除本地已存储的用户名
第二步:判断:本地存储是否有存储。如果有:将本地存储的username保存到:文本框。并且设置,checkbox的checked=true
<script>
var username = document.querySelector(".ipt")
var ckb = document.querySelector(".ckb")
ckb.addEventListener("change",function(){
if(this.checked){
// 如果勾选,则保存文本框到本地存储
localStorage.setItem("username",username.value);
}else{
// 其他情况删除本地存储
localStorage.removeItem("username");
}
})
if(localStorage.getItem("username")){
username.value = localStorage.getItem("username");
ckb.checked = true;
}
</script>
251