localtorage를 이용해 input 입력값 화면에 띄우기.

목표

input 입력값을 화면에 띄워보자.

작동원리 파악

1. form, input 만들기.
2. submit한 후에 form이 사라진다.
3. 입력값이 저장되고 꺼내 쓸 수 있다.

1. submit 후 form 숨기기

form 숨기기

See the Pen by jongha (@gajong) on CodePen.

submit하면 form은 사라졌지만 사용자 이름이 console에는 기록됐다.

h1태그 숨기기

현재 h1은 공백으로 나와있는 것이라 처음에 hidden으로 숨겨놓아야 한다.

h1 class를 hidden으로 지정하고 id를 greeting으로 한다.

See the Pen by jongha (@gajong) on CodePen.

h1을 JavaScript에서 사용할 수 있게 변수로 만들어준다.

submit이 작동하면 form을 hidden으로 숨기고 greeting에 입력 내용을 넣는다. 그리고 greeting class인 hidden을 제거.

string인 "hidden"을 두 개 이상 사용하니까 변수로 만들어준다

string만 포함된 변수

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

const HIDDEN_CLASSNAME = "hidden" 

function onLoginSubmit(event) {
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add(HIDDEN_CLASSNAME);
    userName.innerText = "hello " + username;
    userName.classList.remove(HIDDEN_CLASSNAME)
}

loginForm.addEventListener("submit", onLoginSubmit);

일반적으로 string만 포함된 변수는 대문자로 표기한다.

로그인폼과 다르게 중요한 정보가 없는 변수이기 때문이다.

2. 사용자 이름 불러오기

목표)

localStorage가 비어있으면 form을 보여주고 있다면 form을 숨기고 h1을 나오게 한다.

조건문으로 사용할 조건을 찾아보자.

localStorage에서 Key인 username이 비어있다면이 조건일 것이다.

localStorage.getItem('username');

getItem 해보니 null이라고 나온다. 

if(localStorage.getItem('username') === null) {

이것을 조건문으로 사용하자.

if(localStorage.getItem("user") === null) {
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    loginForm.classList.add(HIDDEN_CLASSNAME);
    loginUser.classList.remove(HIDDEN_CLASSNAME);
    loginUser.innerText = `Hello ${localStorage.getItem("user")}`
}

만약 비워져 있으면 submit event를 실행하고.

아니라면 form을 숨기고 입력값을 숨김 해제한다.

그리고 local storage에서 user값을 가져온다.

완성.

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

const HIDDEN_CLASSNAME = "hidden" 

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

if(localStorage.getItem("user") === null) {
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    loginForm.classList.add(HIDDEN_CLASSNAME);
    loginUser.classList.remove(HIDDEN_CLASSNAME);
    loginUser.innerText = `Hello ${localStorage.getItem("user")}`
}

조금 더 정리하기.

오류 나기 쉬운 반복되는 string "user'

const USER_KEY = "user"

길어서 보기 안 좋은 

const savedUserName = localStorage.getItem(USER_KEY);

반복되는 행동

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

두 번 이상 반복되는 것들은 변수와 함수로 바꿔준다.

See the Pen by jongha (@gajong) on CodePen.

뭔가 더 길어졌지만 오류를 줄일 수 있다면 할 필요성은 충분히 있다.