비전공자 개발일기

Javascript Login with LocalStorage 본문

Javascript

Javascript Login with LocalStorage

HiroDaegu 2021. 8. 25. 00:14
728x90
SMALL
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); //localStorage.setItem("key","value"), getItem("key"),removeItem("key")

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

'Javascript' 카테고리의 다른 글

HTML JAVASCRIPT Select option Multiple  (0) 2021.08.27
Javascript Clock  (0) 2021.08.26
Javascript  (0) 2021.08.16
Javascript  (0) 2021.08.14
Javascript  (0) 2021.08.13