Javascript/기초

localStorage에 user 정보가 있거나 없을 때 form 활용하기

developeryeon 2023. 11. 8. 00:08

 

HTML

<body> 
	<!--class="hidden"을 form & h1 둘 다 쓴다-->
    <form class="hidden" id="login-form">
        <input type="text" placeholder="What is your ID?">
        <input type="submit" value="Log in">
    </form>
    <h1 id="greeting" class="hidden"></h1>

    <script src="script.js"></script>  
</body>

 

Javascript

const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector('#greeting');

const HIDDEN_CLASS = "hidden";
const ID_KEY = "userId";

function onLoginSubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASS);
    const userId = loginInput.value;
    localStorage.setItem("ID_KEY", userId); //아이디를 localStorage에 저장하기
    greeting.innerText = `Hello ${userId}`;
    greeting.classList.remove(HIDDEN_CLASS);
}
    
 loginForm.addEventListener("submit", onLoginSubmit);   


 const savedUserId = localStorage.getItem("ID_KEY");

//만약 class=hidden으로 둘 다 숨기면 아무것도 안보이기 때문에(null) = 유저정보가 없는 것. 
if(savedUserId === null) { //local storage에 유저 정보가 없을 경우
    //show the form
    loginForm.classList.remove(HIDDEN_CLASS);
    //localStorage에서 유저 정보를 지우고 새로고침하면 form 창이 뜬다
    loginForm.addEventListener("submit", onLoginSubmit); //여기에 이벤트 리스너를 하나 추가해주자
    //만약 유저정보가 local storage에 없다면 local storage는 null값을 반환할거야
    //그래서 만약 savedUserId값이 null이라면 form의 hidden class 명을 지워줄거다
    //왜냐하면, 지금은 form이랑 h1 모두 hidden이라는 class를 가지고 시작하거든
    //local storage에 유저정보가 없어서

}else {
    //show the greeting
    greeting.innerText = `Hello ${savedUserId}`;
    greeting.classList.remove(HIDDEN_CLASS);
    //지금 상황에서는 savedUserId만 존재하니까 이걸로 넣어준다
    //먼저 greeting 안에 text를 추가하고 그런 다음 greeting한테 className을 제거해줄거다
};

 

* 만약 local storage가 비어있으면 form부터 보여주면서 지금까지 해오던 걸 한다
하지만 local storage에 유저정보가 있으면 form을 보여주면 안되고 h1 요소를 보여줘야한다
유저 정보 유무를 어떻게 확인할까? =>  if 문으로 해결

if(savedUserId === null) ...

 

강의를 보고 따라해봤다. 

 

요약 : 2개 이상의 식이 반복될 경우 묶어서 하나의 className을 만들었다.