HTML
<body>
<!--class="hidden"을 form & h1 둘 다 쓴다-->
<form class="hidden" id="login-form">
<input type="text" placeholder="What is your ID?">
<input type="submit" value="Log in">
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="script.js"></script>
</body>
Javascript
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector('#greeting');
const HIDDEN_CLASS = "hidden";
const ID_KEY = "userId";
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASS);
const userId = loginInput.value;
localStorage.setItem("ID_KEY", userId); //아이디를 localStorage에 저장하기
greeting.innerText = `Hello ${userId}`;
greeting.classList.remove(HIDDEN_CLASS);
}
loginForm.addEventListener("submit", onLoginSubmit);
const savedUserId = localStorage.getItem("ID_KEY");
//만약 class=hidden으로 둘 다 숨기면 아무것도 안보이기 때문에(null) = 유저정보가 없는 것.
if(savedUserId === null) { //local storage에 유저 정보가 없을 경우
//show the form
loginForm.classList.remove(HIDDEN_CLASS);
//localStorage에서 유저 정보를 지우고 새로고침하면 form 창이 뜬다
loginForm.addEventListener("submit", onLoginSubmit); //여기에 이벤트 리스너를 하나 추가해주자
//만약 유저정보가 local storage에 없다면 local storage는 null값을 반환할거야
//그래서 만약 savedUserId값이 null이라면 form의 hidden class 명을 지워줄거다
//왜냐하면, 지금은 form이랑 h1 모두 hidden이라는 class를 가지고 시작하거든
//local storage에 유저정보가 없어서
}else {
//show the greeting
greeting.innerText = `Hello ${savedUserId}`;
greeting.classList.remove(HIDDEN_CLASS);
//지금 상황에서는 savedUserId만 존재하니까 이걸로 넣어준다
//먼저 greeting 안에 text를 추가하고 그런 다음 greeting한테 className을 제거해줄거다
};
* 만약 local storage가 비어있으면 form부터 보여주면서 지금까지 해오던 걸 한다
하지만 local storage에 유저정보가 있으면 form을 보여주면 안되고 h1 요소를 보여줘야한다
유저 정보 유무를 어떻게 확인할까? => if 문으로 해결
if(savedUserId === null) ...
강의를 보고 따라해봤다.
요약 : 2개 이상의 식이 반복될 경우 묶어서 하나의 className을 만들었다.
'Javascript > 기초' 카테고리의 다른 글
| 배열에서 데이터 꺼내기 (1) | 2023.11.26 |
|---|---|
| [Programmers/JavaScript] Lv.0 - a 와 b 출력하기 (1) | 2023.11.18 |
| [calendar]자바스크립트로 날짜를 구할 수 있을까? (0) | 2023.11.14 |
| LocalStorage 사용법 (0) | 2023.11.13 |
| [login] text input 시 text 화면에 띄우기 (0) | 2023.11.10 |