HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>valila js</title>
</head>
<body>
<form id="login-form" class="hidden">
<input
required
maxlength="15"
type="text"
placeholder="what is your name?"
/>
<input type="submit" value="Log in" />
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="web.js"></script>
</body>
</html>class = "hidden"인 form, h1
CSS
.hidden {
display: none;
}class = "hidden"인 것들을 보이지 않게 한다.
HTML
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);
} // (2)
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
} /* username을 인자로 받는 함수, 함수를 호출하는 위치에 따라 유저정보는 다른 곳에서 옴
예) local storage(1)에 유저정보가 있으면 거기서 유저정보를 받아서 인자로 넣어줌
없다면 form이 submit 되면 input으로부터 유저정보를 받음((2) 로부터)
*/
const savedusername = localStorage.getItem(USERNAME_KEY); // (1)
if(savedusername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
paintGreetings(savedusername);
}설명
처음 웹을 실행하면 h1과 form은 css에 의해 숨겨져 있다.
1. local storage에 "username" 존재 여부 확인
const savedusername = localStorage.getItem(USERNAME_KEY);
USERNAME_KEY를 활용해서 local storage에 username이라는 값이 존재하는지 확인
존재하지 않는 경우
if(savedusername === null) {
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
}
- form을 숨기는 class 삭제
- addEventListener : submit이 발생하면 onLoginSubmit 함수 호출
function onLoginSubmit(event) {
event.preventDefault();
loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username);
paintGreetings(username);
}event.preventDefault : 이벤트의 기본 동작을 실행하지 않도록 지정
loginForm.classList.add(HIDDEN_CLASSNAME) : 로그인폼에 hidden 클래스 추가(로그인 폼 사라짐)
입력 값 ➝ value / username ➝ key가 되어 local storage에 저장
paintGreetings(username) 실행
function paintGreetings(username) {
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
"Hello [username]" 출력
예시
존재하는 경우
else {
paintGreetings(savedusername);
}
paintGreetings(savedusername) 실행
참고
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";위 두개처럼 변수 선언하는 이유 : 변수명의 오타가 있으면 자바스크립트가 지적해 주기때문에 변수 사용
대문자 사용하는 이유 : 관습, 일반적으로 문자열만 포함된 변수는 대문자 표기하고 문자열 저장할때 사용, 중요한 정보 담은게 아니라 대문자 작성
'JavaScript' 카테고리의 다른 글
| [노마드 코더] Date 값 구하기(날짜, 시간) (0) | 2023.11.15 |
|---|---|
| [노마드 코더] Intervals & Timeouts (0) | 2023.11.15 |
| [노마드 코더] local storage (1) | 2023.11.13 |
| [JavaScript] HTML Value 불러오는 방법 (0) | 2023.11.11 |