[Vanilla JS - Chrome App] #1.2 Complete Login

front-end/JavaScript

[Vanilla JS - Chrome App] #1.2 Complete Login

gaan 2022. 7. 7. 16:20

Saving & Loading Username

index.html

<body>
    <form id="login-form" class="hidden">
        <input type="text" placeholder="What is your name?" />
        <input type="submit" value="Log In" />
    </form>

    <h1 id="greeting" class="hidden"></h1>  

    <script src="app.js"></script>
</body>

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 onLoginSubmit(event) {
    event.preventDefault();  // 기본동작 실행되지 않도록 막기
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

// 반복되는 코드 함수화해주기 (argument도 지정!)
function paintGreetings(username) {
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}


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

함수를 호출하는 위치에 따라 유저정보는 다른 곳에서 오게 됨

1. if (localStoroge에 유저정보가 없음)

-> form의 submit을 기다리고

-> form이 submit되면 input으로부터 유저정보를 받고

-> input에서 받은 user를 가진 paintGreetings 함수를 호출

2. else (localStorage에 유저정보가 있음)

-> localStorage에서 유저정보를 받아서 인자(argument)로 넣어줌