[Nomad Coders -JS로 크롬앱 만들기] Login- Saving Username

 

입력받은 username을 저장하고 지속적으로 보여주기 위해서

Web API인 Local Storage를 사용해 보자. 

Local Storage는 브라우저에 값을 저장하고 가져다 쓸 수 있게 해주는 유용한 API이다.

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Window.localStorage - Web APIs | MDN

 

localStorage에 값을 저장 하기 위해서는 setItem을 사용한다. 

localStorage.setItem("username", "Dasol")  : 첫번째 인자는 key 두번째 인자는 value

 

이렇게 콘솔창 - Application - Local Storage 으로 가면 저장한 item을 확인 할 수 있다. 

 

저장된 값을 가져 올 때는 

localStorage.getItem("username") : key 값으로 해당 value를 찾는다.

 

저장된 값을 지울 때는

localStorage.removeItem("username") : key값으로 해당 value를 지운다.

 

만들고 있던 앱의 login Form에 응용해 보자.

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username"

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

loginForm.addEventListener("submit", onLoginSubmit);

 이렇게 이름을 입력받고 Local Storage에 저장 후 user에게 인사를 하는 함수를 구현 수 있다. 

 

Local Storage에도 값이 잘 들어와 있고, 인사도 제대로 출력되는 것을 볼 수 있다. 

 

 

다음으로는, 새로고침이 되면 화면이 다시 login Form으로 되돌아 가 버리는 문제를 해결해야 한다.

 

if 문을 사용해서

username이 저장돼 있지 않다면 login form을 보여주고 username이 저장돼 있다면 greeting을 출력하는 함수를 만들자.

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

loginForm.addEventListener("submit", onLoginSubmit);

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else{
    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

 

 

greeting을 출력하는 두 줄이 반복되기 때문에 함수로 따로 빼서 정리해 보겠다.

 

function onLoginSubmit(event){
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME);
    localStorage.setItem(USERNAME_KEY, username);
    paintGreeting(username);
}

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

loginForm.addEventListener("submit", onLoginSubmit);

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else{
    paintGreeting(savedUsername);
}​

 

이렇게 로그인 기능 완성!!