[JSP] 아이디 기억하기

 

 

 

 목차

1. 작동 로직
2. 코드 작성
3. 리팩토링

 

 

 

1. 작동 로직

1. 웹 브라우저에서 데이터 입력
2. JS 함수 실행
3. localStorage 객체에 입력받은 데이터 저장 (로그아웃 후에도 localStorage 객체에 저장되어있음)
4. 로그아웃
5. 로그인 페이지 이동 시 localStorage 객체에 저장된 데이터를 불러오기

 

 

2. 코드 작성

1. 체크박스 만들기
   1. w3school 에서 원하는 스타일을 선택 (https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp)
   2. 토글 형태의 스타일
2. localStorage 객체에 데이터 저장
   * username 입력하고 checkbox를 체크하는 순서를 지켜야 데이터가 저장됨
      >> 입력과 체크의 순서에 상관없이 체크상태로 로그인 성공시에 데이터가 자장되게 수정 필요
      >> 2일 만에 겨우 완료! (리팩토링)
   
   1. localStorage : 웹 브라우저에 데이터를 저장하는 객체
   2. setItem("key", value) : localStorage에 데이터를 저장하는 메소드 (key값은 식별 단어, value는 실제 데이터)
   3. getItem("key") : setItem으로 저장한 key를 호출할 수 있음
   4. window.onload : 웹 브라우저가 로드되면 발동되는 트리거. 보통 뒤에 함수를 작성하여 실행을 시킨다

 

 

 

1) 체크박스 만들기

1-1. w3school 에서 원하는 스타일을 선택

 

1-2. 토글 형태의 스타일

 

 

2. localStorage 객체에 데이터 저장

 

 

 

3. 리팩토링

1. 로그인 페이지 (onload 될때마다)
   1. checkbox가 false면, localStorage 데이터 삭제 
   2. checkbox가 true면 localStorage에 저장된 데이터 가져오기
   3. localStorage에 저장된 username과 웹 브라우저로 입력한 username이 같으면 checkbox를 true로 유지
2. 로그인 로직
   1. checkbox가 true면 localStorage에 username 저장, false면 삭제

 

1. 로그인 페이지

 

2. 로그인 로직