* 로그아웃 버튼 만들기
버튼 누르면 묻지도 따지지 않고 바로 로그아웃
| <!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>login</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> <form id="greeting" class="hidden"> <h1></h1> <button>Log-out</button> </form> <script src="app.js"></script> </body> </html> |
환영문구에 로그아웃버튼 추가 - form으로 버튼 클릭시 submit 후 자동 새로고침
| const loginform = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const greetingH1 = document.querySelector("#greeting h1"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function loginOn(event) { event.preventDefault(); const username = loginInput.value; localStorage.setItem(USERNAME_KEY, username); loginfor m.classList.add(HIDDEN_CLASSNAME); paintGreeting(username); } function paintGreeting(username) { greetingH1.innerText = `hello ${username}` greeting.classList.remove(HIDDEN_CLASSNAME); } function logoutOn() { localStorage.removeItem(USERNAME_KEY); } const savedUsername = localStorage.getItem(USERNAME_KEY); if(savedUsername === null) { loginfor m.classList.remove(HIDDEN_CLASSNAME); loginform.addEventListener("submit", loginOn); } else { paintGreeting(savedUsername); } greeting.addEventListener("submit",logoutOn); |
HTML에서 id, class 값 위치 변경으로 queryselector 수정
logoutOn 함수 추가 - storage에서 username value 삭제
if문 종료 후 로그아웃 버튼 누를 시 login-form으로 이동
 |
 |
버그 : 처음에는 greeting.addEventListener("submit",logoutOn);
else문에 넣었더니 2번 눌러야 로그아웃이 됨.
해결 : else 문 밖에 입력
반응형
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript (11) - random (0) | 2023.04.11 |
|---|---|
| javascript (10) - intervals, timeout, padStart, padEnd (0) | 2023.04.11 |
| javascript (8) - Login 만들기 #2 (0) | 2023.04.04 |
| javascript (9) - event.preventDefault (0) | 2023.04.04 |
| javascript (8) - Login 만들기 #1 (0) | 2023.04.03 |
