[JavaScript] Saving/Loading Username

1. Saving Username

localStorage는 우리가 브라우저에 무언가를 저장할 수 있게 해주고, 나중에 가져다 쓸 수 있게 해준다.
setItem이란 localStorage에 정보를 저장할 수 있다.

localStorage.setItem("저장할 값의 이름", "저장할 값")

이 코드를 실행하면 DB에 'Key' 'Value'에 새로운 항목이 저장된다.

1. 저장된 값 불러오기(getItem)

localStorage.getItem("저장할 값의 이름")

"저장할 값"

2. 저장된 값 삭제하기(removeItem)

localStorage.removeItem("저장할 값의 이름")

그럼 삭제 된다.

value 저장해보자.

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

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
	event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem("username", username);   <---- value 저장하기
    greeting.innerText = "Hello " + username;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

그러나 여기서 form이 여전히 표시된다. 만약 localStorage에 유저 정보가 없다면 form이 먼저 표시되도록 하고, 그 외 경우는 h1이 표시되도록 할 것이다.

2. Loading Username

form을 먼저 보여주기 전에 localStorage가 비어 있으면 form부터 보여주면서 위에 코드를 실행하면 된다. 하지만 localStorage에 유저 정보가 있으면 form을 보여주면 안 된다. h1 요소를 보여줘야 한다.

그럼 localStorage의 유저정보 유무를 어떻게 확인할까?

localStorage.getItem("저장할 값의 이름")

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

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username"; <---- username이 너무 많아서 변수로 저장하기

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

const savedUsername = localStorage.getItem(USERNAME_KEY); <----유저정보 확인하기

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

그러나 greeting.innerText와 greeting.classList.remove 반복하고 있다.
변수를 만들어 호출해주자.

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

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username"; <---- username이 너무 많아서 변수로 저장하기

function onLoginSubmit(event) {
	event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);   <---- value 저장하기
    paintGreetings(username);
}

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

const savedUsername = localStorage.getItem(USERNAME_KEY); <----유저정보 확인하기

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

정리하자면
우리는 username을 인자로 받는 함수를 만들었고 greeting에 Hello ${username}을 추가한 후 hidden class를 지워주는 일을 했다. 하지만 우리가 함수를 호출하는 위치에 따라 유저 정보는 다른 곳에서 오게 된다.

예를 들면 localStorage에 유저정보가 있으면 거기서 유저정보를 받아서 인자로 넣어 줄 것이다. 만약, localStorage 유저정보가 없다면, 우리는 form의 submit를 기다리고 form이 submit되면 우리는 input으로부터 유저정보를 받고 input에서 받은 유저를 가진 paintGreetings를 호출한다.