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)로 넣어줌
