4. Login 화면 (Loading Username)

- HTML -

form에 hidden인 class를 추가함.

 

 

 

- JS -

const USERNAME_KEY = "username"; 를 하여

localStorage의 key인 저장될 값의 이름인 username를

USERNAME_KEY라는 변수에 저장함.

function onLoginSubmit(event) 에

추가로 코드를 작성함.

localStorage.setItem(USERNAME_KEY, username); 를 하여

localStorage에 USERNAME_KEY인 username와 username인 loginInput.value을 저장함.
paintGreetings(username); 를 하여

paintGreetings(username)인 function을 실행함.

function paintGreetings(username) {

greeting.innerText = `Hello ${username}`;

greeting.classList.remove(HIDDEN_CLASSNAME);
}

를 하여

greeting의 innerText에 Hello와 username을 저장하고

greeting에 HIDDEN_CLASSNAME라는 class를 제거하는

paintGreetings(username)인 function을 만듬.

 

const savedUsername = localStorage.getItem(USERNAME_KEY); 를 하여

savedUsername 라는 변수에 USERNAME_KEY인 username을 

localStorage에 value를 읽어오게 함.

 

if (savedUsername === null) { 를 하여

만약 savedUsername가 null이라면

즉, savedUsername인 localStorage의 value가 없다면

 

loginForm.classList.remove(HIDDEN_CLASSNAME); 를 하여

loginForm에 HIDDEN_CLASSNAME를 삭제하고

즉, loginForm에 HIDDEN_CLASSNAME인 hidden을 삭제함.

loginForm.addEventListener("submit", onLoginSubmit); 를 하여

loginForm이 submit 하면 onLoginSubmit인 function을 실행함.
} 

 

else { 를 하여

만약 그렇지 않다면
paintGreetings(savedUsername); 를 하여

paintGreetings(savedUsername)인 function을 실행함.
}

 

 

 

- 화면 -

input에 아무것도 작성하지 않으면 localStorage에 아무것도 뜨지 않음.

 

 

input에 작성하고 버튼을 누르면

localStorage에 작성한 내용이 저장됨.

 

username이란 Key에

작성한 jjye라는 Value가 저장됨.