4.6 Loading Username

강의

ls가 비어 있으면 form부터 보여주면서 지금가지 해오던걸 하면 된다. 하지만 ls에 유저정보가 있으면 form을 보여주면 안된다.

그럼 우리가 먼저 할 일은, ls에 유저정보 유무를 확인하는거다.

우선 ls 데이터를 다 삭제한다.
콘솔에 localStorage.getItem("username")를 입력하면 null이 출력된다.

const savedUsername = localStorage.getItem("username");
if(savedUsername === null){
    //show the form
} else{
    // show the greetings
}

이런식으로 작성하면 된다.

• "username"이게 계속 나오는것 같아서 변수로 지정해준다.
  => string으로 작성하다보면 오타가 날 수 있다! 변수로 지정해주면 오타가 났을때, 정의되지 않은 변수라고 알려주기 때문에, 변수로 지정해주는 것을 잊지말자!!

근데 우리가 원래 로그인 양식이 처음부터 나와있는데, 로그인 양식과 greeting 모두 숨긴 채로 시작해야 될 것 같다. <form class="hidden" id="login-form"> 이제 새로고침하면 아무것도 뜨지 않는다.

const USERNAME_KEY = "username";
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
} else{
    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

---

이제 된다!! 끝난줄 알았는데 작은 문제가 있다.

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

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    greeting.innerText = `Hello ${username}`;       <---- 중복
    greeting.classList.remove(HIDDEN_CLASSNAME);    <---- 중복
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
} else{
    greeting.innerText = `Hello ${savedUsername}`;  <---- 중복
    greeting.classList.remove(HIDDEN_CLASSNAME);    <---- 중복
}

전체 코드에서 라인이 중복된 부분을 함수로 만드는게 나을 수 있다고 니꼬는 생각함.
코드는 중복을 최소화하고, 간결하게 작성하는게 좋으니까!! (๑•̀ㅂ•́)و✧

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

---

완성된 코드

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

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    paintGreetings(username);
}

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
} else{
    paintGreetings(savedUsername);
}

사이트에 처음 들어가면, 이름을 입력하라고 뜬다. 이름을 입력하면, Hello mini가 화면에 출력되는데, ls에 저장됐기 때문에, 새로고침을 해도 Hello mini가 출력된다.