HTML
<body>
<form class="hidden" id="login-form">
<input type="text" placeholder="What is your ID?">
<input type="submit" value="Log in">
</form>
<h1 class="hidden" id="greeting"></h1>
</body>
Javascript
'use strict';
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input[type=text]');
const greeting = document.querySelector('#greeting');
const HIDDEN_CLASSNAME = "hidden";
const USERID_KEY = "userId";
function loginHandler(event) {
event.preventDefault(); //원래하던 새로고침을 막고 시작
const userId = loginInput.value;//유저 이름 저장
localStorage.setItem(USERID_KEY, userId);
loginForm.classList.add(HIDDEN_CLASSNAME);//form을 없앨 class_name을 삭제.
wrap_Greetings(userId);
}
//이제 브라우저에 값을 저장
function wrap_Greetings(userId) {
greeting.innerText = `Hello ${userId}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", loginHandler);
//localStorage
const savedUserId = localStorage.getItem("USERID_KEY");
if (savedUserId === null) { //만약 savedUserId 값이 null일 경우, form을 표시
//show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", loginHandler);
} else {
//show the greetings
wrap_Greetings(savedUserId);
}
CSS
.hidden{
display: none;
}
'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 |
| localStorage에 user 정보가 있거나 없을 때 form 활용하기 (0) | 2023.11.08 |