I'm gonna be the BEST.

[JS] local storage를 이용하여 유저 정보 표시하기 본문

프론트엔드/JavaScript

[JS] local storage를 이용하여 유저 정보 표시하기

새싹 개발자 뚜비 2022. 7. 1. 21:46
728x90

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기(4.6 Loading Username)

이번 시간에는 form을 보여주기 전에, addEventListener를 하기 전에

local storage가 비어있으면 form부터 보여주면서 지금까지 해왔던 대로 프로그램이 진행되고(이전 포스팅 참고)

local storage에 유저 정보가 있으면 form을 보여주지 않고 h1을 보여주는 프로그램을 만들어보도록 하자!

 

 

그럼 먼저 local storage에 유저 정보가 있는지 없는지 확인해야 할 것이다.

const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";

function onLoginSunmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    localStorage.setItem("username", username);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
} 

loginForm.addEventListener("submit", onLoginSunmit);

// local storage에 유저 유무 확인
const savedUsername = localStorage.getItem("username");

console.log(savedUsername);

기존의 코드에 local storage에 유저 유무를 확인할 수 있는 localStorage.getItem("username"); 를 변수(const)에 담아 console.log로 확인해보자.

 

이 작업 직전에 storage에 있던 유저 정보를 삭제한 뒤라 null이 뜨는 것을 확인할 수 있다. 

 

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 onLoginSunmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
} 

loginForm.addEventListener("submit", onLoginSunmit);

// local storage에 유저 유무 확인
const savedUsername = localStorage.getItem(USERNAME_KEY)

console.log(savedUsername);

if (savedUsername === null) {
    // show the form
} else {
    // show the greetins
};

여기에 if문을 이용하여 코드를 작성한다면 오늘 우리의 목표대로 프로그램을 구현할 수 있을 것이다.

로직은 정해졌는데 username이 계속하여 중복사용되고 있었다.

실수를 줄여주기 위해 먼저 USERNAME_KEY라는 변수로 고정시켜 준 후 "username"부분을 교체해주었다.

 

생성한 string을 반복해서 사용하게 될 경우에는

 const HIDDEN_CLASSNAME = "hidden";           → class name
 const USERNAME_KEY = "username";               → local storage key

두가지의 경우처럼 대문자 변수로 저장해놓는 것이 실수를 줄이기에 좋다.

 

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

form과 greeting 모두 숨긴 채로 시작하자

HTML의 form과 h1의 class를 모두 hidden으로 해준다.(css 설정 필요함)

 

확인해보면 html에는 있지만 화면에는 표시되지 않는 것을 알수있다.

 

 

그럼 본격적으로 JS를 이용하여 프로그램을 제어해보도록 하자.

// --상단 코드 생략-- //


// local storage에 유저 유무 확인
const savedUsername = localStorage.getItem(USERNAME_KEY)

if (savedUsername === null) {
    // show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSunmit);
} else {
    // show the greetins
};

만약 유저 정보가 local storage에 없다면 local storage는 null값을 반환할 것이다.

그래서 만약 savedUsername값이 null이라면 form의 hidden class명을 지워줄 것이다.

 

현재 local storage에 유저 정보가 저장된 것이 없기 때문에 form은 표시되고 h1은 숨겨진 상태가 유지되고 있다.

 

이름을 넣고 로그인을 하면 form이 숨겨지고 greeting이 보여지게 된다.

 

 

이제 새로고침을 해도 이 코드가 작동될 수 있도록 해보자.

if (savedUsername === null) {
    // show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSunmit);
} else {
    // show the greetins
    greeting.classList.remove(HIDDEN_CLASSNAME);
};

else 부분을 이용하여 greeting을 보여줄텐데 greeting을 보여주기 위해서는 hidden class명을 제거해줘야 한다.

 

greeting에 이제 hidden class명은 없어졌지만 greeting에 텍스트로 사라졌다.

텍스트를 추가해줘야 한다.

 

if (savedUsername === null) {
    // show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSunmit);
} else {
    // show the greetins
    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
};

greeting에 innerText로 텍스트를 추가하는데 Hello 와 saveUsername을 합쳐서 출력할 수 있도록 해준다.

 

새로고침을 하면 저장된 유저 정보를 표시해준다!! 

 

local storage에서 유저정보를 지우고 새로고침을 하면 form이 아주 잘 표시된다!!

 

 

문제가 있다면 greeting.innerText와 greeting.classList.remove를 코드 안에서 2번 반복하고 있다는 것이다.

이걸 함수로 만들어서 편리하게 사용해보도록 하자!

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);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    paintGreetings(username);
} 

function paintGreetings(username) {
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

// local storage에 유저 유무 확인
const savedUsername = localStorage.getItem(USERNAME_KEY)

if (savedUsername === null) {
    // show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    // show the greetins
    paintGreetings(savedUsername);
};

paintGreeting이라는 함수를 만들고 함수의 내용으로는 중복되었던 두 줄의 코드를 넣어준다.

    greeting.innerText = `Hello ${username}`;  
    greeting.classList.remove(HIDDEN_CLASSNAME);  

argument로 username을 넣어주고 innerText를 username으로 변경해주었다.

 

그리고  onLoginSubmit 안의 내용과 else의 내용을 함수를 호출하도록 변경해주고 알맞는 argument를 넣어준다.

이렇게 함으로써 함수를 호출하는 위치에 따라 유저 정보는 각자 다른 곳에서 불러와질 것이다.

예를 들어 local storage에 유저 정보가 있으면 그 곳에서 유저 정보를 받아 인자로 넣어줄것이고

local storage에 유저 정보가 없다면 form의 submit을 기다리고 submit 됐을 때

input으로부터 유저 정보를 받고 input에서 받은 user를 가진 paintGreetings를 호출할것이다.

 

 

다시 프로그램을 실행해보자!

진짜. 진짜. 너무 잘된다. 야호😎😎😎

 

 

728x90

'프론트엔드 > JavaScript' 카테고리의 다른 글

[JS] interval 기능을 알아보자 (시계 만들기_1)  (0) 2022.09.03
[JS] local storage를 이용한 user login 최종 복습  (0) 2022.07.15
[JS] localStorage API를 이용하여 브라우저에 데이터 저장하기  (0) 2022.06.25
[JS] CSS(display: none)를 이용하여 HTML 요소 숨기기  (0) 2022.06.17
[JS] preventDefault 함수로 브라우저 링크(href) 기본 동작 제어  (0) 2022.06.16
'프론트엔드/JavaScript' Related Articles more