localStorage를 통한 로그인, 로그아웃 기능 구현

Question

안녕하세요. 최근 자바스크립트를 공부하고 있습니다. localStorage를 이용해 로그인, 로그아웃 기능을 만들어 보았는데요.(사실 로그인도 아니고 그냥 입력된 아이디를 그대로 표시해 주는 정도입니다.) 처음 페이지가 뜨고 로그인을 했을 때는 정상적으로 로그인이 되고, 로그아웃을 하고나서도 정상적으로 로그아웃이 됩니다. (로그인을 했을 시에는 welcom "로그인 아이디"가 표시되고 로그아웃 버튼이 표시되게 됩니다.)그런데 로그아웃을 한번 하고 난 이후, 다시 로그인을 할 시에 로그인아이디가 제대로 표시되지 않게 되고 f12키를 눌러 로컬스토레이지에 들어가봐도 key값은 저장되어 있는데 value값이 비어있는 걸로 나오게 됩니다. 콘솔을 모두 찍어보니 로그아웃을 하고 난 이후에 재 로그인 시에 paintLoginStatus까지만 실행이 되어야 하는데 어떤이유에서인지 loginProcess가 한번 더 실행되는 현상을 보았습니다. 또, 그상태에서 (로그인 아이디가 제대로 들어가지 않은 상태)에서 한번 더 아이디를 입력하고 로그인을 하면 사이클이 3번을 돕니다. 제가 생각하기로는 paintLoginStatus까지만 실행이 되야 하고 paintLoginStatus에서는 불러오는 함수가 없기때문에 사이클이 돌 이유가 없는데요. 이유를 알려주시면 감사하겠습니다. const loginDiv = document.querySelector("#loginDiv"); const createInput = document.createElement("input"); const createP = document.createElement('p'); const loginInformation = loginDiv.appendChild(createP); const loginBox = loginDiv.appendChild(createInput); const createBtn = document.createElement("button"); const logoutBtn = loginDiv.appendChild(createBtn); const loginId = "ID"; function logoutProcess(){ console.log("logoutProcess"); localStorage.removeItem(loginId); checkLoginStatus(); } function paintLoginStatus(id){ console.log("paintLoginStatus"); loginInformation.innerHTML = `Welcome ${id}`; loginBox.classList.remove("NotcurrentlyLoggedIn"); loginBox.classList.add("currentlyLoggedIn"); logoutBtn.classList.remove("currentlyLoggedIn"); logoutBtn.classList.add("NotcurrentlyLoggedIn"); logoutBtn.innerText = "logout"; logoutBtn.addEventListener("click",logoutProcess); } function loginProcess(id){ console.log("loginProcess"); console.log(id); localStorage.setItem(loginId,id); loginBox.value = ""; checkLoginStatus(); } function paintLoginInput(){ console.log("paintLoginInput"); loginInformation.innerText = "please input your ID"; loginBox.classList.remove("currentlyLoggedIn"); loginBox.classList.add("NotcurrentlyLoggedIn"); loginBox.placeholder = "plaese input your Id"; logoutBtn.classList.remove("NotcurrentlyLoggedIn"); logoutBtn.classList.add("currentlyLoggedIn"); loginBox.addEventListener("keypress",function(e){ if(e.key === "Enter"){ const id = loginBox.value; loginProcess(id); } }) } function checkLoginStatus(){ console.log("checkLoginStatus"); const status = localStorage.getItem(loginId); if(status === null){ paintLoginInput(); } else{ paintLoginStatus(status); } } function init(){ checkLoginStatus(); } init();

이너피스 · Answer

제가 봐도 글도 너무 못쓰고 기네요.. 그래도 답변 달아주시면 감사하겠습니다!!

hhj · Answer

loginBox의 keypress가 여러번 등록되서 그런거같은데 빼고 바깥에 document.onload등으로 다른 이벤트에 넣어주세요.위코드에서 init에 넣어도 될거같긴한데 dom이 전부 생성됐을지는 몰라서 안전하게 패이지 로드이벤트때 넣는게 좋을것같네요

localStorage를 통한 로그인, 로그아웃 기능 구현

2개의 답변

#logout 목록