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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="login-form" class="hidden">
<input
required maxlength="15"
type="text" placeholder="What is your name?"
class = "idInput" />
<input type="submit" value="Log in">
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="script.js"></script>
</body>
</html>script.js
const loginInput = document.querySelector(".idInput")
const loginForm = document.querySelector("#login-form")
const greeting = document.querySelector("#greeting")
const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"
function loginBtnClick(event) {
event.preventDefault()
loginForm.classList.add("hidden")
const username = loginInput.value
localStorage.setItem("USERNAME_KEY", username)
paintGreetings(username)
}
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`
greeting.classList.remove(HIDDEN_CLASSNAME)
}
loginForm.addEventListener("submit", loginBtnClick)
const savedUsername = localStorage.getItem("USERNAME_KEY")
if (savedUsername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME)
loginForm.addEventListener("submit", loginBtnClick)
} else {
paintGreetings(savedUsername)
}로그인시 localstorage에 username을 저장하고 저장시 로그인 폼은 css hidden을 통해 숨긴다. localstorage에 저장된 username 값이 있을 때는 "hello 'username'" 을 출력한다.
실행화면
코린이 화이팅