Javascript

[노마드코더] 바닐라JS 공부 4일차(Login 구현:preventDefault, localStorage)

래모 2022. 1. 4. 16:13

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">
    <title>Momentum App</title>
    <link rel = "stylesheet" href = "style.css">
    <style>
        .hidden { 
            display: none;
        }
    </style>
</head>
<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>
    <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"; //일반적으로 string만 포함된 변수는 대문자로 표기
const USERNAME_KEY = "username"

function onLoginSubmit(e) {
    e.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기
    
    const username = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME); // loginForm에 class추가하기
    
    localStorage.setItem(USERNAME_KEY, username);
    
    paintGreetings(username);
}

function paintGreetings(username) {
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME); // greeting에 class 제거하기
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME); // loginForm에 class 제거하기
    loginForm.addEventListener("submit", onLoginSubmit);
}else {
    paintGreetings(savedUsername)
}

 

preventDefalut

: a태그나 submit 태그는 누르게 되면 href를 통해 이동하거나, 창이 새로고침하여 실행됨

preventDefalut를 통해 이러한 동작을 막을 수 있음 

 

주로 사용되는 경우

  1. a 태그를 눌렀을 떄도 href 링크로 이동하지 않게 할 경우
  2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우(input type = "submit" or button)

input의 유효성 검사를 작동시키기 위해서는 form태그 필요 (required)

function onLoginSubmit(e) {
    e.preventDefault(); // 브라우저가 기본 동작을 실행하지 못하게 막기
    console.log(loginInput.value);
    console.dir(e);
}

function handleLinkClick(e) {
    e.preventDefault();
    console.dir(e);
}

loginForm.addEventListener("submit", onLoginSubmit); // SubmitEvent 발생
link.addEventListener("click", handleLinkClick); // PointerEvent 발생

 

localStorage

: 웹스토리지의 한 종류 (다른 것으로는 세션스토리지가 있음)

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key"); // value

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

 

주의사항

문자형 데이터 타입만 지원하기 때문에 숫자형 데이터를 쓰지 않도록 주의해야함

모두 문자형으로 반환

localStorage.setItem('num', 1)
localStorage.getItem('num') // "1"
typeof localStorage.getItem('num') //"string"