[개인프로젝트] html에서 자바스크립트로 데이터 가져오기 (2)

오늘은 개인적인 사정이 있어서 코딩을 얼마 하지 못했습니다ㅠㅠ 점점 또 느슨해지기 전에 마음을 단단히 먹고 다시 시작해야겠네요.

<script src="js/login.js"></script>

일단 html에 자바스크립트의 경로를 추가해 줍니다.

const loginForm = document.querySelector(".login-form");
const loginId = document.querySelector(".login-form > input:nth-child(1)");
const password = document.querySelector(".login-form > input:nth-child(2)")

function onSubmit(e){
    e.preventDefault();
    console.log(loginId.value);
    console.log(password.value);
    localStorage.setItem("MyProjectId", loginId.value);
    localStorage.setItem("MyProjectPass", password.value);
    
}

loginForm.addEventListener("submit", onSubmit);

일단 form 관련 태그 정보를 loginForm 변수에 넣어줍니다. 이후에 loginForm.addEventListener("submit", onSubmit); 이라는 명령어를 추가해서 submit이 실행되었을때 이벤트 리스너 코드를 추가해 줍니다. 이후 함수 하나를 만들어 주고 e.preventDefault(); 라는 명령어를 추가해서 새로고집을 방지해고 로그를 찍어줍니다. 과연 로그가 잘 나올까요...?

일단 로그에 제가 쓴 데이터들이 출력되며 함수가 정상적으로 실행되는 것은 확인했습니다. localStorage.setItem 이후에 이 명령어를 써저 로컬스토리지에 아이디랑 패스워드를 저장해 줍니다. 나중에 회원 가입했을때 아이디랑 패스워드 비교를 하려면 get해야되는데 일단은 정상적으로 접근이 되는지 확인해봤습니다.

 

오늘은 진짜 조금밖에 못했는데 내일 진짜 달려야겠네요. 화이팅!