1. username 기억하기 - storage 저장
2. username을 받으면 새로운 화면에 Hello username 화면 출력
3. username 있을 경우 새로고침하면 Hello username 화면 출력
ㄴ 기존에는 새로고침하면 input form으로 돌아갔음
| html | js | css |
<!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>Momentum App</title> </head> <body> <form id="login-form" class="hidden"> <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> |
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(); const username = loginInput.value; localStorage.setItem(USERNAME_KEY, username) loginFor m.classList.add(HIDDEN_CLASSNAME); paintGreeting(username); } function paintGreeting(username) { greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME); } const savedUsername = localStorage.getItem(USERNAME_KEY); if (savedUsername === null) { loginFor m.classList.remove(HIDDEN_CLASSNAME); loginForm.addEventListener("submit", onLoginSubmit); } else { paintGreeting(savedUsername); } |
css .hidden { display: none; } |
* storage 저장/불러오기/삭제
localStorage.setItem("username", username) = "username"이라는 key에 username value 저장
lacalStorage.getItem("username") username key값의 value 불러옴
lacalStorage.removeItem("username") username key값의 value 삭제
* 새로고침 화면 설정하기
const savedUsername = lacalStorage.getItem("username")
ㄴ starage "username"에 저장된 value 값을 변수로 저장.
If (savedUsername === null)
ㄴ 값이 없는 true일 경우, 로그인 폼의 class="hidden" 삭제 --> 로그인폼 화면 출력
ㄴ submit 될 경우 onLoginSubmit 함수 실행 (입력된 값을 storage 후 hello ** 화면 출력하는 함수)
ㄴ 로그인폼 class = hidden 추가, greeting <h1> class = hidden 삭제
else
ㄴ 값이 있는 false일 경우, hello ** 화면 출력, greeting class = hidden 삭제
* paintGreeting(); 함수
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
- 같은 역할하는 명령어 함수로 묶어줌.
- onLoginSubmit 함수에서는 변수username을 인자로 활용하기 위해 username을 사용
- if-else에서는 변수 saveUsername, strage에 저장된 value를 활용하기 위해 saveUsername을 사용
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript (10) - intervals, timeout, padStart, padEnd (0) | 2023.04.11 |
|---|---|
| javascript (8) - Login 만들기 #3 (0) | 2023.04.05 |
| javascript (9) - event.preventDefault (0) | 2023.04.04 |
| javascript (8) - Login 만들기 #1 (0) | 2023.04.03 |
| javascript (7) - Html, CSS, JavaScript, toggle (0) | 2023.04.03 |
