LOGIN - getting username

step 1.
유저가 이름을 제출하면, form 없애기(1. html 요소 자체를 없애기, 2. css를 이용해 숨기기 v)

.hidden {
	display: none;
    }

step 2.
form이 제출되면 username 표시해서 인사하기

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

const HIDDEN_CLASSNAME = "hidden"; //중요한 정보를 담은게 아니라서 대문자로 작성(클래스명 변수지정)//

function onLoginSubmit(event) {
  event.preventDefault(); // 기본동작 수행 못하게 함 //
  loginForm.classList.add(HIDDEN_CLASSNAME); // 폼을 사라지게 함 //
  const username = loginInput.value; //유저네임 변수에 저장 //
  greeting.innerText = `hello ${username}`; //h1에 텍스트 넣음, 백틱``으로 변수와 문자열 결합. //
  greeting.classList.remove(HIDDEN_CLASSNAME); // h1이 화면상에서 사라지지 않게 함 //
}

loginForm.addEventListener("submit", onLoginSubmit);

step 3. 유저네임 저장하기 (새로고침 할 때마다 유저이름 기억하기)
뭔가를 저장하는 것(유튜브에서 볼륨을 조절하고 새로고침하면 그 볼륨값을 기억하는 것 등)은 매우 자주 쓰인다. >> 'local storage' 라는 브라우저가 가지고 있는 API 이용하기

localStorage.setItem('username', 'Tom'); 를 통해 정보 저장하기
(key(저장될 값의 이름), value(값))
localStorage.getItem('username'); : 정보 불러오기
localStorage.remove('username'); : 정보 삭제하기

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

const HIDDEN_CLASSNAME = "hidden"; // 반복되는 string은 대문자로 변수 저장(실수x)
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);  // 유저정보가 input으로부터 옴
}

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);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  // show the greetings
  paintGreetings(savedUsername); // 유저정보가 localStorage로부터 옴
}

---

• review

1. 로그인 페이지에는 html요소가 form과 h1 2개가 있다.
   form은 input을 가지고 h1은 비어있다.
   둘은 hidde이라는 클래스(display: none;)를 공통으로 가진다.

2. js가 localStorage를 확인한다.
   localStorage를 key로 불러오면 null 값을 받거나 유저이름을 받는다.
   null일 경우: if 문에서 숨겨진 form이 나타난다.
   유저이름 입력될 경우: else 문으로 유저에게 인사를 한다.

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

const HIDDEN_CLASSNAME = "hidden"; // 반복되는 string은 대문자로 변수 저장(실수x)
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  event.preventDefault(); // 기본동작 수행 못하게 함
  loginForm.classList.add(HIDDEN_CLASSNAME); // 폼을 사라지게 함
  localStorage.setItem(USERNAME_KEY, loginInput.value); // 유저명 기억하기
  paintGreetings(); // 유저명을 받아서 인사
}

function paintGreetings() {
  const username = localStorage.getItem(USERNAME_KEY);
  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);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  // show the greetings
  paintGreetings();
}

같지만 다른 코드 (localStorage를 두번 열어본다)