🚀local Storage을 이용한 로그인 시스템 만들기🚀 | JavaScript 시리즈 018
by @ENFJ2021. 8. 8.
1. 알아두기
1. string을 반복해서 사용하는 경우에 그리고 그것들이 무조건 같아야 할경우 변수로 고정시키는것을 추천!! =>이유: 왜냐하면!!! 만약 string을 작성하다가 오타가 나면 자바스크립트는 이걸 지적하지 않고, 변수명은 오타가 나면 지적해주기 때문이다.
2. 전체적인 구조 설명
앞에서 배웠던 local Storage 를 이용하여, 값을 브라우저에 저장하고, 불러오고 , 제거하는 법을 배웠다.
로그인 입력란에 값을 받은후, 변수 username에 저장된다. 그후, local Storage에 값을 저장한다. 그리고나서 , h1 요소에 텍스트 출력한다. 그후 h1 의 클래스에 hidden 을 제거해준다. (즉, hidden(css에 display:none)을 제거 한다는 건 화면에 출력한다는 뜻이다.) <- function paintgreetings(username) 그렇다면 h1요소의 텍스트가 그제서야 출력된다.
그런데 만약! local Storage에 값을 불러왔는데 값이 null (즉 , 존재하지 않는다면) 이라면, 로그인 형식의 hidden 클래스를 제거해준다. ( == 화면에 로그인 형식을 출력시킨다.) 그리고 이벤트 리스너 submit 을 작동시켜 함수 실행. else 라면 ( null 값이 아닌 값이 존재한다면), h1 요소에 텍스트 출력한다. 그후 h1 의 클래스에 hidden 을 제거해준다. (즉, hidden(css에 display:none)을 제거 한다는 건 화면에 출력한다는 뜻이다.) <- function paintgreetings(savedUsername)
3. 코드& 심플 주석
js / html
10. 브라우저의 기본동작 막음. 즉 브라우저가 submit 할때 원래 하는 동작을 안하게 된다
11. form 에 hidden 이라는 class 추가 ->hidden 은 css에 있음.
13. localStorage에 값 저장
18. username 을 인자로 받는 함수를 만들었다.
19. 로컬 스토리지에 저장된 값을 불러와서 + 텍스트 추가
20. greeting에서 hidden 클래스를 제거
24. localStorage에 저장된 값 불러오는 변수 savedUsername 생성
25. local Storage에 아무 값도 저장되어 있지 않다면 null 값을 출력함
4. 출력 결과 확인
5. 직접 해보기
css
const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME="hidden";
const USERNAME_KEY="username"; // string을 반복해서 사용하는 경우에 ㄱ리고 ㄱ것들이 무조건 같아야 할경우 변수 로 고정시키는거 추천
//만약 string을 작성하다가 오타가 나면 자바스크립트는 이걸 지적하지 않기 때문에 변수로 변경해줌.왜냐하면 변수명은 오타가 나면 지적해주기 때문
function onLoginSubmit(event){
event.preventDefault(); //브라우저의 기본동작 막음. 즉 브라우저가 submit 할때 원래 하는 동작을 안하게 된다
loginForm.classList.add(HIDDEN_CLASSNAME) // form 에 hidden 이라는 class 추가 ->hidden 은 css에 있음.
const username = loginInput.value;
localStorage.setItem(USERNAME_KEY,username) //localStorage에 값 저장
paintGreetings(username);
}
function paintGreetings(username){ //username 을 인자로 받는 함수를 만들었다.
greeting.innerText=`Hello ${username}`; // 로컬 스토리지에 저장된 값을 불러와서 + 텍스트 추가
greeting.classList.remove(HIDDEN_CLASSNAME); //greeting에서 hidden 클래스를 제거
}
const savedUsername= localStorage.getItem(USERNAME_KEY); //localStorage에 저장된 값 불러오는 변수 savedUsername 생성
//local Storage에 아무 값도 저장되어 있지 않다면 null 값을 출력함
if(savedUsername ===null){
loginForm.classList.remove(HIDDEN_CLASSNAME)
loginForm.addEventListener("submit",onLoginSubmit)
}else{
paintGreetings(savedUsername);
}
