Today I Learned #5

사용자의 이름을 form을 통해 받아오기

TIL#4에서, Local Storage에 대해 공부하며 Local Storage에 currentUser 여부를 확인하고, 있다면 Hello (currentUser)!가 출력되도록 하는 것을 확인하였다. 그 과정에서 출력 여부를 확인하기 위해 개발자 도구의 Local Storage를 편집하였는데, 오늘은 form을 submit하여 정보를 Local Storage로 보내도록 하는 연습을 해보자.

Divide & Conquer

function loadName() {
    const currentUser = localStorage.getItem(USER_LS)
    if(currentUser === null){
        askForName();
    } else {
        paintGreeting(currentUser);
    }
}

#4의 코드에서는 개발자 도구로 currentUser를 지정해주었고, else에 해당하는 부분이 정상 작동 하는 것을 확인하였고, 오늘은 currentUser === null인 상황에서 askForName()이라는 함수를 생성하여 사용자의 이름을 페이지를 통해 입력받아 저장하도록 했다.

submit

function askForName() {
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit",handleSubmit);
}

currentUser === null인 경우 작동하는 함수는 다음과 같다. 일단, form의 classList에 "showing"을 추가해줌으로서 display: none;을 display: block으로 바꾸어 사용자에게 보이도록 하였고, eventListener를 통해 "submit"이 발생하면 handleSubmit이 동작하도록 하였다.

그렇다면 "submit"이 발생하면 작동하는 handleSubmit에서는 어떤 처리를 해주어야 할까?

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = input.value;
    paintGreeting(currentValue);
}

handelSubmit의 첫 줄에는 event.preventDefault();라는 생소한 코드가 있는데, 이 코드가 사용된 이유를 설명하기 위해서는 submit이라는 event에 대한 설명이 필요하다. MDN의 submit 문서를 참고하면, form 내부에서 enter를 입력할 경우 발생된다고 한다. 또한 중요한 점은, Cancelable 속성이 yes라는 점이다.
w3school의 preventDefault() 문서를 보면,

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

이라는 문구가 존재하는데, 이것에 대한 속성이 바로 Cancelable이고, submit event가 발생하면 form 내부의 item을 다른 페이지로 전송하고, 페이지를 새로 로드하는데, 그 과정을 중단하도록 preventDefault() 함수를 사용하였다.

두번째 줄은 이전과 같이 form 태그가 보이도록 className.add()을 사용해주었고, 세번째 줄에서 사용자가 input에 입력한 내용을 currentValue로 저장하도록 하였고, 이 currentValue를 인자로 paintgreeting()함수가 작동하도록 함수를 구성하였다.

다시, Local Storage

앞선 함수를 저장후에 실행하면, 정상적으로 사용자의 입력을 받아 해당 이름에 인사를 하는 것까지 실행이 되지만, 새로고침을 하면 다시 사용자의 이름을 물어보는 상황이 발생한다. 이유는 Local Storage에 currentValue를 currentUser로서 저장한 것이 아니기 때문인데, 이를 저장하는 방법은 간단하다.

먼저 saveName(currentValue);를 handleSubmit() 함수의 마지막 줄에 추가하고, 다음과 같이 saveName() 함수를 선언해주면 된다.

function saveName(text) {
    localStorage.setItem(USER_LS, text);
}

이 과정까지 마친 후, 실행해보면,,,

Local Stroage의 currentUser로 나의 입력이 저장되고,

새로고침 후에도 출력됨을 확인할 수 있다.