자바스크립트 (18) - 로그인 기능 구현 총정리

html

 

css

 

 

 

 

js

html에는 form과 h1 두가지 요소만이 있다. 그리고 두개들은 히든 클래스의 스타일 때문에 숨겨져 있을 것이다.

 

그다음 자바스크립트가 실행돼 유저 네임 키를 가지고 로컬 스토리지를 확인하게 된다.

 

로그인창에 서밋한 기록이 없다면, 처음에는 if문에서 null조건에 따라 폼의 hidden클래스를 지우고 onsubmit이벤트 함수를 호출한다.

 

호출하면서 이벤트 객체에 대한 정보를 넘겨주게 되는데, 거기에는 event 에 관한 정보들이 담겨있다.

 

그 정보에는 브라우저가 이벤트에 대한 기본 동작을 못하도록 막는 프로퍼티가 있다. 이것을 실행해 로그인폼 객체에 다시 히든을 추가해

폼을 숨긴다.

 

그런 다음 인풋 값을 가져와 username이라는 변수에 저장해준다.

 

그리고 셋 아이템 메소드를 통해, 스토리지에 유저네임 키와 함꼐 저장한다.

그다음 페인트 그리팅을 호출하는데, 인풋값을 (유저네임 변수)로 넣어준다.

그다음 페인트 그리팅 함수는 , h1으로부터 hidden클래스를 제거해 h1을 태그를 화면에 띄워준다.

 

이제 savedUsername 값은 널이 아니라 nico가 되게 된다. 새로고침을 하면, else문 이하를 실행해, 바로 페인트 그리팅스를 호출한다. 이때 페인트 그리팅스의 인자로는 입력된 인자값이 아닌, 이미 로컬스토리지에 들어가 있는 유저네임값이 들어간다.