4.5 Saving Username

강의

local storage

이제 value를 저장하는 방법을 배우자! 유저에게 매번 질문하기에는 번거로우니까 ㅇㅇ

뭔가를 저장하는건 자주 사용되는 기능이다. 그러니 아마 API가 존재할거다. 우리가 브라우저에 공짜로 뭔가를 기억할 수 있게 해주는 기능이 존재한다. 그 API이름은 local storage이다.

콘솔에 localStorage를 입력하면 이미 정의된것을 확인할 수 있다. local storage는 우리가 브라우저에 뭔가를 저장할 수 있게 해준다. 그래서 나중에 가져다가 쓸 수 있다. local storage에 뭐가 들어있는지 보고 싶다면 개발자도구를 이용하면 된다.

우클릭 > 검사 > Application > Storage > local storage

local storage말고도 여러 저장소가 있는데, local storage이 가장 다루기 쉽다.
현재는 비어있는것을 확인할 수 있는데, 나중에 이것저것 저장하다 보면 바뀌는걸 보게 될거다!

setItem

localStorage.setItem(저장할 값의 이름,저장할 값) : ls에 정보를 저장할 수 있다.

콘솔에 localStorage.setItem("username","mini")를 입력해주면 ls에 저장된것을 확인할 수 있다.
Key = username / Value = mini

getItem

localStorage.getItem(값 이름) : 저장된 값을 불러올 수 있다.
localStorage.getItem("username")을 입력하면 'mini'가 출력된다.

removeItem

localStorage.removeItem(값 이름) : 저장된 값을 삭제한다.
localStorage.removeItem("username") 'mini'가 삭제된 것을 알 수 있다.

---

이제 우리가 할 일은 유저가 이름을 제출할 때 그걸 ls에 저장해 주면 되는거다.

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem("username",username); <--- 수정된 부분
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

새로고침을 하면 여전히 form이 표시되고 있다. ;; ls에서 이름이 사라지는건 아닌데, 우리가 바라는것은 이게 아니다. ls에 이름이 저장되고 새로고침을 해도 Hello mini가 유지되는것이 우리가 원하는거다...!! ;-;

다음 강의

다음 강의에서 우리는 우선 ls에 username이 존재하는지 확인하고, 존재한다면 로그인 form을 표시하지 않고, h1요소가 표시되도록 할거다! 그렇지만, ls에 유저정보가 없다면 form이 먼저 표시되도록 할거다.