미루고 미뤄왔던 모멘텀 ..
죽지 않고 돌아와 버렸다 !
● Index.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>Momentum LOGIN</title>
</head>
<body>
<!-- hidden : 요소 숨기기 (존재하지만 숨겨져 있음) -->
<form id="login-form" class="hidden">
<!-- required : 필수 작성 요소 -->
<input required maxlength="15" type="text" placeholder="What is your name?"/>
<input type="submit" value="Log In"/>
</form> <!-- form 은 submit 을 기다리는 중 -->
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>
</html>
● App.js
const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form")
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";
# Login Submit Button 클릭 시 작동 함수
function onLoginSubmit(event) {
event.preventDefault(); # 브라우저의 기본 동작 막기
loginForm.classList.add(HIDDEN_CLASSNAME); # form 에 hidden 클래스 추가 : 화면에 안보여짐
const username = loginInput.value; # input 값
# localStorage 사용
localStorage.setItem(USERNAME_KEY, username); # key: USERNAME_KEY, value: username
paintGreetings(username);
}
function paintGreetings(username){
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME); # hidden 클래스 삭제 : 화면에 보여짐
}
# localStorage 이용한 조건문
const savedUsername = localStorage.getItem(USERNAME_KEY); # 저장된 username이 있는지 확인
if (savedUsername === null){
// show the form
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", onLoginSubmit);
} else {
// show the greeting
paintGreetings(savedUsername);
}》 localStorage : 브라우저에 정보 저장
> 저장 : localStorage.setItem("key", "value");
> 조회 : localStorage.getItem("key");
> 삭제 : localStorage.removeItem("key");
● Style.css
.hidden {
display: none;
}
'ETC' 카테고리의 다른 글
| AWS Elastic Beanstalk (1) | 2024.01.21 |
|---|---|
| [ JAVA ] 팝업창으로 input 받기 (0) | 2023.09.21 |
| [바닐라 JS로 크롬 앱 만들기] JS on the Browser (0) | 2023.04.17 |
| [바닐라 JS로 크롬 앱 만들기] Javascript 문법 (0) | 2023.04.06 |
| [바닐라 JS로 크롬 앱 만들기] 경고창 띄우기 (2) | 2023.04.05 |