Javascript-03. Local Storage에 특정값 저장하기

local storage는 작은 DB와도 같음.
setItem, getItem, removeItem이 가능함.
console에서 localStorage.setItem("username", "chloepark") 식으로
Key- Value의 조합으로 저장 가능함.

이것을 활용해,
자바스크립트에서 사용자의 인풋값을 저장해두고
사용자가 다시 로그인했을때 저장된 인풋값을 활용할 수 있음.

localStorage.setItem("username", username)

을 추가해서 사용자로부터 받은 유저이름을 저장함. (변수명, 변수) 임

만약 localStorage에 username이 없으면
form을 표시해서 사용자의 인풋을 기다리고

username이 있으면
form을 표시하지 않고 저장된 username을 활용함

이를 위해 우선
localStorage에서 가져온 username을 const로 저장

const savedUsername = localStorage.getItem("username")

만약 localStorage에 username이 없으면
form의 숨김 기능을 제거해야 하는데
이를 위해 html에서 우선 form의 class에 hidden을 추가

만약 username이 저장돼 있으면,
loginform을 표시하기 위해 hidden을 제거하고,
addEventListener를 조건문 안에 넣어서
사용자의 이름이 없을 경우 이벤트에 대한 함수가 실행되게 함

const savedUsername = localStorage.getItem("username"); 

if (savedUsername === null) {
    loginForm.classList.remove("hidden")
    loginForm.addEventListener("submit", handleSubmitBtn)

사용자의 이름이 있을 경우에는
h1이 표시되면 되는데, else 조건문 뒤에
greeting의 hidden을 제거

} else {
    greeting.classList.remove("hidden")
}