✔️ HTML
<form id="login-form" class="hidden"> <input required maxlength="15" type="text" placeholder="What is your name?"> <button>Log In</button> </form> <h1 class="hidden" id="greeting"></h1>
🪄 Input
에 required
요소를 추가하여 필수입력을 표시하게 할 수 있다.
또한 maxlength="15"
로 작성하여 Input
에 입력수 제한을 둘 수 있다.
✔️CSS
.hidden { display: none; }
✔️SCRIPT
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(); // 기본동작은 실행되지 않게 하는 함수 _ 기본동작 : submit 후 새로고침되는 동작 loginform.classList.add(HIDDEN_CLASSNAME); //hidden이라는 class name을 더해줘서 form을 숨김 const username = loginInput.value; //loginInput에 작성한 값을 username 으로 저장 localStorage.setItem(USERNAME_KEY, username); //key와 value값을 지정 (미니데이터베이스 느낌) }
기본 동작이 실행되지 않게하는 함수이다.
값이 submit되면 자동으로 새로고침 되는 것이 기본동작인데 preventDefault
로 자동으로 새로고침 되는 현상을 막았다.
loginform
에 HIDDEN_CLASSNAME
의 함수를 추가해서 form을 숨긴다.
username
을 loginInput
에 작성된 값으로 설정해준다.
localStorage은 브라우저의 storage에 key값과 value값을 저장할 수 있게하는데, setItem으로 ket값과 username을 설정해준다.
function painGreeting(username) { greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME); //h1로부터 Hidden 시킴 painGreeting(username); //apingreeting 함수 호출
Hello ${username}
greeting 함수에 innerText로 위와같은 텍스트를 값으로 가져온다.
HIDDEN_CLASSNAME
을 remove, 제거함으로서 greeting
, 즉 h1을 보여지게 한다.
username
을 입력해서 apinGreeting
함수를 호출한다.
const savedUsername = localStorage.getItem(USERNAME_KEY);
logcalStorage에 USERNAME_KEY
값으로 username
을 storage에 저장 할 수 있게한다.
if (savedUsername === null) { loginform.classList.remove(HIDDEN_CLASSNAME); loginform.addEventListener("submit", onLoginSubmit); } else { painGreeting(savedUsername); }
Storage에 저장된 saveUsername
이 null 값이라면,
HIDDEN_CALSSNAME
함수를 실행시켜서 h1과 form을 지우지 않는다.
이벤트를 등록하는 addEventListener로 submit
, 제출이 실행되면 onLoginSubmit
이벤트를 실행하도록 한다.
너무 간단하게 뚝딱뚝딱했지만 아직 코드를 작성하다가 헷갈려서 다시 거슬러 올라가서 이해할려고하는 과정이 있다.. 다들 그런거겠지 ...?