js实现记住用户名/密码存储本地localStorage
发布时间：2022-04-20 17:20:17
作者：泸州科技
来源：本站
浏览量（8）
摘要：场景：在做用户登录用户名、密码的时候，有记住用户名复选框。效果：当用户点击记住：用户名。那么下次打开网页，会记住用户名。当用户未勾选：记住用户名，则不会保存到文本框。实现过程：第一步：监听：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>
17
