브라우저가 데이터를 저장하는 법

지난 시간에 로그인 인풋 값을 활용해 이름을 띄우는 것에 성공했다.
이번 시간에는 브라우저를 새로고침해도 이름이 사라지지 않고 유지할 수 있는 법을 배웠다.

먼저 지난 시간에는 onloginsubmit을 활용해
event를 방지하고
form에 히든클래스를 적용해 input 데이터를 안보이게 처리하고
h1의 이너텍스트에 벡틱을 적용해 글을 채웠다
그리고 기존에 적용되있던 히든을 제거하는 과정을 거쳤다.

그러나 이번시간에는 localstrage를 활용해 입력된 데이터 값을 보존하는 과정을 거쳤다.

먼저 콘솔창에 localstrage.setItem("username", "username");을 적용하면,
인스펙트창 어플리케이션 부분에 이름이 저장된 것을 알 수 있다.
이때 앞쪽은 key값, 뒤는 value다. 즉
localstrage.setItem("username", "nico");

이렇게 적용된 것을 알 수 있다.

그리고 이를 콘솔창에서 localstorage.getItem("username");을 입력한다면
"nico"라는 값을 얻을 수 있다.
이를 활용해서 "로컬스토리지에 값이 username이란 오브젝트에 value가 있다면"
form을 계속해서 display:none;으로 처리하고
h1에 있는 클래스 히든을 지워줘!라고 명령할수도 있다.

우선 아래는 값을 입력했을 경우, localstorage에 저장해줘!까지 만들어둔 상태다

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

이렇게 된다면 인풋값을 입력했을때, 위에서 설명한 동작이 일어나게 된다.

그리고 실제로 저장한 유저이름을 활용해서 조건문을 만들면,
"로컬스토리지에 값이 username이란 오브젝트에 value가 'null'인지에 따라, 다른 form이나 h1을 보여줘"라고 말하면 된다.

식은 아래와 같다.

const savedUsername = localStorage.getItem(USERNAME_KEY);

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

이 과정을 거친다면 새로고침을 해도
localstorage에 데이터가 있는 이상, 화면이 바뀌지 않게 된다.
다만 여기서 눈에 밟히는 코드가 있다.
바로 그리팅 부분의 코드다. 해당부분은 두번 중복되어 리팩토링을 거쳐보자.

리팩토링을 거친 현재 상황이다. 해당 코드를 보고 이해할 수 있다면 괜찮을 것이다.

지금 다시보니 뭔 소린지 모르겠다
글쓰는 법부터 다시 배워야겠다.

2022-02-26