210803
JavaScript #14
저장 후 새로고침을 하면 정보는 그대로지만 다시 form이 나오게 된다.
로그인이 됐으면 다시 form이 나오지 않게 하려면 어떻게 해야할까?
- local storage 유저정보 유무 확인
- 유저정보가 없다면 form을 보여주고 진행
정보가 없다면 null이 반환된다.
기본적인 흐름은 이렇다.
if(savedUsername === null){
// form을 보여준다
}else{
// greetings를 보여준다
}우선 언제 보여줄지 선택을 해야하기 때문에 모두 hidden을 하였다.
-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>MOO App</title>
</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.getElementById("login-form")
const loginInput = loginForm.querySelector("input")
const greeting = document.querySelector("#greeting")
const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"
function onLoginSubmit(event){
event.preventDefault() // 기본동작 막기 (submit)
loginForm.classList.add(HIDDEN_CLASSNAME) // form이 사라지도록 classname추가
const username = loginInput.value // 사용자 이름 저장
localStorage.setItem(USERNAME_KEY, username) // local storage에 저장
greeting.innerText = `Hello ${username}` // greeting에 string 저장
greeting.classList.remove(HIDDEN_CLASSNAME) // hidden class 삭제
}
loginForm.addEventListener("submit",onLoginSubmit)
const savedUsername = localStorage.getItem(USERNAME_KEY)
if(savedUsername === null){
// form을 보여준다
loginForm.classList.remove(HIDDEN_CLASSNAME) // form을 보여준다
loginForm.addEventListener("submit",onLoginSubmit) // 로그인 과정 시작
}else{
// greetings를 보여준다
greeting.innerText = `Hello ${savedUsername}`
greeting.classList.remove(HIDDEN_CLASSNAME) // greetings를 보여준다
}모두 hidden이 되어있는 상태에서 local storage에 값이 존재하는 경우 greetings를 보여주고 저장된 값이 없는 경우는 값을 저장하기 위해서 form을 보여주고 저장하는 과정을 진행하도록 한다.
값이 없는 상태
값이 존재
새로고침을 해도 유지된다.
app.js의 코드를 보면
greeting.innerText = `Hello ${username}`
greeting.classList.remove(HIDDEN_CLASSNAME)이 부분이 반복되고있다.
이를 함수로 만들어 코드를 보다 깔끔하게 정리하자.
-app.js
const loginForm = document.getElementById("login-form")
const loginInput = loginForm.querySelector("input")
const greeting = document.querySelector("#greeting")
const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"
function onLoginSubmit(event){
event.preventDefault() // 기본동작 막기 (submit)
loginForm.classList.add(HIDDEN_CLASSNAME) // form이 사라지도록 classname추가
const username = loginInput.value // 사용자 이름 저장
localStorage.setItem(USERNAME_KEY, username) // local storage에 저장
paintGreetings(username)
}
function paintGreetings(username){
greeting.innerText = `Hello ${username}`
greeting.classList.remove(HIDDEN_CLASSNAME) // greetings를 보여준다
}
loginForm.addEventListener("submit",onLoginSubmit)
const savedUsername = localStorage.getItem(USERNAME_KEY)
if(savedUsername === null){
// form을 보여준다
loginForm.classList.remove(HIDDEN_CLASSNAME) // form을 보여준다
loginForm.addEventListener("submit",onLoginSubmit) // 로그인 과정 시작
}else{
// greetings를 보여준다
paintGreetings(savedUsername)
}
공부중인 것들 기록
0개의 댓글
관련 채용 정보
