이전 게시물에서는 사용자가 이름을 입력하면 입력창은 사라지고, Hello와 입력한 이름의 문구가 뜨도록 만들어봤다.
하지만 새로고침을 하면 사용자는 다시 이름을 입력해야 하는 번거로움이 있기 때문에
새로고침을 해도 로그인이 된 상태가 유지되도록 해보려고 한다.
유저 정보 저장하기
localStorage를 사용하면 유저 정보를 저장하고, 불러올 수 있다.
저장은 setItem으로 하고, 불러오는 건 getItem을 사용한다.
입력한 이름은 loginInput 변수에 담기 때문에, (const loginInput = document.querySelector("#login-form input");)
username이란 변수에는 사용자 이름(loginInput)이 담기고, ( const username = loginInput.value; )
그 사용자 이름은 username이란 키의 value로 저장된다. ( localStorage.setItem(USER_KEY, username); )
입력창에 이름을 입력하고 Login을 누른 후 개발자 도구의 Local Storage를 보면 잘 작동하는 걸 볼 수 있다.
유저 정보 유지하기
저장하는 걸 했으니, 저장된 정보로 새로고침을 해도 유지되게 만들어야 한다.
if와 else를 사용해서 저장된 정보가 있을 때는 'Hello (이름)'이 뜨고, 정보가 없다면 입력창을 보이게 만들었다.
getItem의 괄호 안에는 key값을 넣는데,
오타가 생기면 에러를 출력하도록 USER_KEY 변수에 담았고, 그 값을 saveUsername이라는 변수에 담았다.
console을 찍어보면 저장된 이름이 없을 때는 null이 뜨기 때문에, 불러온 Item이 null이라면 loginForm의 hidden클래스 값을 삭제하고
그게 아니라면(저장된 값이 있다면) 텍스트를 삽입하게 하고 greeting의 hidden클래스 값을 삭제하게 했다.
하지만 저렇게 하고 실행과 새로고침을 해보면 여전히 입력창이 보이기 때문에, html의 form에 기본값으로 hidden클래스를 줘야 한다.
완성
greeting.innerText = Hello ${name}; 과 greeting.classList.remove(HIDDEN); 이 반복되기 때문에 함수로 만들었다.
파라미터와 아규먼트를 주고 받는 것에 대해 이해하기 어려울 수도 있지만
호출하는 함수에, 호출되는 함수의 내용을 넣어서 생각해보면 이해하기 좀 더 수월하다.
그리고 당연한 말이지만, 함수는 호출을 해야 실행되고, 함수 밖에 적힌 코드들은 호출이고 뭐고 없이 그냥 알아서 잘 실행된다.
예를 들어, loginSubmit 함수에 if else 부분을 잘라 넣고 실행해도, 함수는 호출을 해야 실행되기 때문에
새로고침을 하면, 다시 호출하지 않는 이상 실행되지 않는다. 함수 밖의 if else는 웹 페이지를 띄우면 실행되기 때문에 호출과는 상관없다.
