Nomad-Momentum-1) Login

로그인 화면 만들기

1. 첫 화면에서는 form, h1태그가 모두 숨겨진 상태
2. localStorage를 확인하고 사용자 정보가 저장되어 있으면 h1태그를 표시
3. 사용자 정보가 저장되어 있지 않으면 form태그를 표시

form 화면일 때

• input에 사용자 이름을 입력하고 submit을 클릭
• 사용자 이름이 username에 담겨지고 localStorage로 저장됨
• 이때, 브라우저의 기본동작(새로고침)을 막아주고, form이 사라지고 h1이 표시되도록 바뀜

h1 화면일 때

• localStorage에 담긴 사용자 정보를 받아서
• html의 h1태그에 Hello + "username"형태로 표시

코드 - greeting.js

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";

//submit버튼을 눌렀을 때 동작
function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  const username = loginInput.value;
  
  //localStorage에 username을 담는 setItem 활용
  localStorage.setItem(USERNAME_KEY, username);
  paintGreetings(username);
}

//저장된 이름이 있으면 h1태그에 넣어서 표시하는 paintGreetings 함수
function paintGreetings(username) {
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

//localStorage의 item을 받아와야함
const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  //저장된 이름이 없으면 form을 표시
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);

} else {
  //저장된 이름이 있으면 h1을 표시 > 함수로 수정
  paintGreetings(savedUsername);
}

정리

localStorage.getItem(USERNAME_KEY) : 로컬스토리지의 아이템을 가져옴
localStorage.setItem(USERNAME_KEY, username) : 로컬스토리지에 아이템을 담음