[JavaScript]Momentum App - 1.Login - Saving Username

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Window.localStorage - Web APIs | MDN

저장공간 = localStorage

 

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

//String 반목 사용시 변수로 고정
const HIDDEN_CLASSNAME = "hidden"; 
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
    event.preventDefault(); // 1. 브라우저의 기본동작(페이지 새로고침)을 멈춤   
    loginForm.classList.add(HIDDEN_CLASSNAME); // 2. form을 다시 숨김
    const username = loginInput.value; // 3. loginInput.value를 username이라는 변수로 저장
    localStorage.setItem(USERNAME_KEY, username); // 4. username 값을 username이란 key와 함께 local storage에 저장
    paintGreetings(username); //5. paintGreetings 함수 호출 (입력한 유저명)을 인자로 받음
}

function paintGreetings(username) { // 환영 문구 출력 함수
    greeting.innerText = `Hello ${username}`; // h1에 텍스트 추가
    greeting.classList.remove(HIDDEN_CLASSNAME); // h1 보여주기
}
const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){ // 저장된 이름이 없으면
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);// form 보여주기
    // loginForm에 addEventListener를 더하고, submit을 기다림
    loginForm.addEventListener("submit", onLoginSubmit);
    // submit event가 발생하면 onLoginSubmit 함수가 실행
} else { // 이미 있으면
    //show the greetings
    paintGreetings(savedUsername);
}