[JS Toy Project] localStorage 저장

LoginForm localStorage

**이전에 모달창에 로그인폼을 만든곳에 Localstorage를 이용해서 사용자가 username 과 password를 입력하면 Localstorage에 저장을 해보았다.**

// localStorage
<script>
const loginForm = document.querySelector(".form-control");


function onLoginSubmit (event) {
  event.preventDefault();

  const username = inputId.value;
  localStorage.setItem("USERNAME_KEY", username);

  const password = inputPw.value;
  localStorage.setItem("PASSWORD_KEY", password);
  
}

loginForm.addEventListener("submit", onLoginSubmit);
</script>

localStorage.setItem

localStorage에 아이템을 추가하기 위해서는 setItem() 함수를 사용한다.

window.localStorage.setItem(key, value)

로그인 버튼에 submit 이벤트를 걸어두고 사용자가 로그인 버튼을 누르면 inputId.value 값과 inputPw.value 값을 가져와 localStorage에 저장한다.

이후에 localStorage.getItem을 이용해서 사용자가 입력하고 저장된 username 과 password를 가져와 모달창을 열면 저장된 값으 초기값으로 보여주도록 만들어 볼 예정이다.

localStorage.getItem

localStorage의 아이템을 읽기 위해서는 getItem() 함수를 사용한다.

window.localStorage.getItem(key)