[JavaScript] - 로그인 폼 만들기 ②

https://taehyeon-smilestudy.tistory.com/25

[JavaScript] - 로그인 폼 만들기 ①

 

만들고 싶은 폼

조건:
로그인 input에 이름을 입력하고 enter나 로그인 버튼을 눌렸을 때
로그인 폼은 사라지고 인사말이 나오며 인사말은 새로고침 해도 초기화되지 않는다.

 

HOW?

1. 로그인 폼에서 submit 이벤트가 일어나면 로그인폼은 사라지고 사용자가 입력한 value는 로컬 스토리지에 저장하는 함수를 만들어줍니다. 2. 사라져있던 인사말이 나오면서 로컬스토리지에 있는 value값을 이용해 인사말을 span에 넣어줍니다. 3. if문을 이용하여 로컬스토리지에 값이 없으면 로그인폼이 나타나고 값이 있으면 인사말이 나오게 합니다. (로컬스토리지에 있는 값을 불러오기 때문에 새로고침해도 인사말을 초기화 되지 않습니다.) 4. 로그아웃 버튼을 이용해 로컬스토리지에 있는 값을 삭제할 수 있게 합니다.

 

다음은
if문을 이용하여 로컬스토리지에 값이 없으면 로그인폼이 나타나고
값이 있으면 인사말이 나오게 합니다.
(로컬스토리지에 있는 값을 불러오기 때문에 새로고침 해도 인사말을 초기화되지 않습니다.)

 

if문을 만들기 전 중복되는 값을 변수로 만들어 줍니다.
username이라는 키값을 변수로 만들어 사용하기 쉽게 합니다.
const LOCAL_USERNAME_KEY = "username";

 

 

그리고 로컬스토리지에 안에 저장되어있는 키 값을 변수로 지정해주고
if문을 만들어 줍니다.

 

const savedUserName = localStorage.getItem(LOCAL_USERNAME_KEY);
 
if (savedUserName === null) {
//savedUserName이 null(빈값)이라면
 
  login.classList.remove(HIDDEN_CLASS_NAME);
  login.addEventListener("submit", loginSubmit);
} else {
  showGreeting(savedUserName);
 
  /*savedUserName에 값이 저장되어 있다면
  로컬스토리지에 저장되어있는 savedUserName을 매개변수로
  showGreeting을 실행한다*/

submit을 하면 if문으로 인해 로컬스토리지에 저장되어 있는 값을 불러오기 때문에
새로고침을 해도 값이 초기화 되지 않는 걸 볼 수 있습니다.

 

마지막으로 로그아웃 버튼을 이용해 로컬스토리지에 있는 값을 삭제할 수 있게 합니다.

로그아웃 버튼을 클릭하면 로그인폼은 다시 나오고 로컬스토리지에 있는 키값은 지워지는
함수를 만들어 줍니다.

function removeStorage() {
  localStorage.removeItem(LOCAL_USERNAME_KEY);
  //로컬스토리지에 있는 키값을 삭제한다.
  login.classList.remove(HIDDEN_CLASS_NAME);
  greeting.classList.add(HIDDEN_CLASS_NAME);
  loginInput.value = "";
  //loginInput에 text값을 빈칸으로 해준다.
}
 
logoutBtn.addEventListener("click", removeStorage);