[javascript]localStorage로 간단한 로그인 기능 만들어보기

[저번 포스팅에서 설명한 localStorage 저장 기능과 연계해 간단하게 로그인해보는 코드를 작성하겠습니다.]

---

- localStorage에 저장 / 색깔이 바뀌는 시계  -   하이퍼링크입니다.

1. querySelector로 "로그인"의 입력 칸과 로그인 버튼을 가져옵니다.

2.ID와 PASSWORD변수에 각각 입력칸의 값들을 저장합니다.

3. 현재 입력받은 ID의 PASSWORD값과 회원 가입한 ID의 PASSWORD가 같다면 SUCCESS를, 아니면 WRONG를 경고창으로 띄웁니다.

4. 위 2,3을 하나의 함수로 선언합니다.

5. 지정된 영역이 클릭되었을때 CheckValue(위에서 만든 함수)를 호출합니다.

 

+ 내용. localStorage를 초기화하는 버튼을 만들어줍니다. 

6. 마무리

7. 결과물

첫화면

입력하는 장면

localStorage에 저장된 모습

로그인 성공모습

하단의 LS-Clear버튼을 누른 후 모습

 

-html-