localstorage 에 유저 정보가 있느냐 여부에 따라서 새로고침 하면 input form 이 뜰지 말지
결정 할 것이다. 유저가 정보를 입력하면, localstorage 에 저장되고, input 은 hide 된다.

input 이 hide 처리 되면 paintGreeting() 을 통해 Hello username 이 화면에 출력된다.

<body>
  <form class="hidden" id="login-form">
    <input 
      required
      maxlength="15"
      type="text" 
      placeholder="what is your name?" />
    <button>Log In</button>
  </form>
  <h1 id="greeting" class="hidden"></h1>
</body>

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();
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username)
  loginForm.classList.add(HIDDEN_CLASSNAME);
  paintGreeting()
}

function paintGreeting() {
  const username = localStorage.getItem(USERNAME_KEY);
  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 {
  paintGreeting()
}