본문 바로가기
JavaScript 시리즈☕

🚀local Storage을 이용한 로그인 시스템 만들기🚀 | JavaScript 시리즈 018

by @ENFJ 2021. 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);





}

html


  

    
    
    
    
  
<!DOCTYPE html>

<html lang="kr">

  <head>

    <meta charset="utf-8">

    <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?"

      />

      <input type="submit" value="Log In"/>

    </form>

    <h1 id="greeting" class="hidden"></h1>

    <script src="app.js" ></script>

  </body>

</html>

css


  

    
    
    
    
  
.hidden{

  display: none;

}

'JavaScript 시리즈☕' 카테고리의 다른 글

🚀명언 적용 하기 + 배경 설정하기🚀 | JavaScript 시리즈 020  (6) 2021.08.08
🚀Time (시계) 만들기(🔥통합정리🔥)🚀 | JavaScript 시리즈 019  (6) 2021.08.08
🚀local Storage(로컬 스토리지?) 🚀 | JavaScript 시리즈 017  (4) 2021.08.08
🚀로그인 창 만들기🚀 | JavaScript 시리즈 016  (3) 2021.08.07
🚀Toggle (토글) 🚀 | JavaScript 시리즈 015  (2) 2021.08.06

관련글

티스토리툴바