Language/JavaScript

바닐라 JS로 크롬 앱 만들기 - LOGIN

jaewpark 2022. 2. 3. 16:35

알아두어야 하는 것

  1. querySelector
  2. preventDefault
  3. classList
  4. addEventListener
  5. localStorage

 

querySelector

문서 내에서 일치하는 querySelector() 첫 번째 항목을 반환

"#idName" : id 가 idName과 일치하는

".className" : class가 className과 일치하는

"input" : input과 일치하는

 

preventDefault [여기]

 이벤트가 명시적으로 처리되지 않으면 기본 작업이 정상적으로 수행되지 않아야 한다고 사용자에 알려줌

 

classList

클래스를 조작하는데 사용,  add() remove() replace() 그리고 toggle() 메서드가 있다.

 

addEventListener [여기]

EventTarget 지정된 이벤트가 대상에 전달될 때마다 호출될 함수를 설정

type[여기]의 경우는 Event의 유형 (click, submit ...)

listener의 경우는 Event 지정된 유형의 이벤트가 발생할 때 알림을 받는 개체

 

localStorage

데이터에 만료 시간이 없지만 페이지 세션이 종료될 때, 즉 페이지가 닫힐 때 데이터가 지워진다

개발자모드-Application-Local Storage 로 들어가게 되면 확인

완성의 코드

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <form id="login-form" classname="hidden">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="what is your name?"
      />
      <button>Log In</button>
    </form>
    <h2 id="greeting" classname="hidden"></h2>
    <script src="app.js"></script>
  </body>
</html>

 

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

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

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

loginForm.addEventListener("submit", onSubmit);

const savedUsername = localStorage.getItem(USERNAME_KEY);

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