js實現記住用戶名/密碼存儲本地localStorage
發布時間:2022-04-20 17:20:17
作者:瀘州科技
來源:本站
瀏覽量(89)
摘要:場景:在做用戶登錄用戶名、密碼的時候,有記住用戶名復選框。效果:當用戶點擊記住:用戶名。那么下次打開網頁,會記住用戶名。當用戶未勾選:記住用戶名,則不會保存到文本框。實現過程:第一步:監聽: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>
196