JS - [Login 기능 - localStorage(입력값 저장, 불러오기)]

   < getting username >

 

이제 유저가 이름을 제출하면 FORM이 없어지도록 해보자.

1) html 요소 자체를 없내는 방법         2) CSS를 이용해 숨기는 방법이 있다.

 

2) 방법을 알아보자!

CSS에 숨기는 속성을 가진 hidden 클래스를 만들고 숨길 요소에 이 hidden classname을 주면 된다.

 

아래와 같이 form을 제출했을 때 기본 동작은 막아주고, 유저 이름은 username에 저장하고, classname을 추가하고, 확인 차 username을 출력하는 코드를 작성했다.

그러면 입력창에 이름을 입력 후 Log In 버튼을 누르면 form은 사라지고 입력값은 console에 기록된다.

 

 

그리고 아래와 같이 body 태그에 hidden 클래스를 가진 h1 태그를 추가했다. 이제 form은 숨기고 h1은 표시할 텍스트가 있을 경우만 표시되도록 해보자. 먼저 h1태그에 greeting id를 추가해준다.

이제 유저의 이름을 변수로 저장해주고, 그 이름을 h1 안에 넣어줄 것이다.

greeting 요소를 querySelector로 가져온 후 아래와 같이 greeting 요소(h1태그)에 텍스트를 추가해주는 코드와, hidden 클래스를 제거하는 코드를 추가했다.

그리고 hidden(클래스 이름)이 반복되고 있으므로, 따로 변수로 저장해주자. 일반적으로 string만 포함된 변수는 대문자로 표기하는 관습이 있다.

즉 string을 반복해서 사용하는 경우에 변수로 고정시켜주자! string을 작성하다가 오타가 날 땐 지적해주지 않지만 변수명이 오타가 날땐 지적해준다.

 

 

또한 innerText에 보면 "Hello " + username 과 같이 작성되어있다. 이는 `Hello ${username}` 과 같이 대체해서 사용할 수 있다. 이 방법은 두 가지 규칙이 있다. 먼저 만약 변수와 string을 결합하고 싶다면 ${변수명} 과 같이 표현하면 된다. 다음 규칙은 ` ` (백틱) 기호를 사용해야 한다는 것이다.

 

그러면 확인해보자!

입력하고 Log In 버튼을 누르니

이름이 잘 출력됨!

 

---

1. localStorage

 

   < Saving Username >

 

유저에게 매번 질문할 수 없으므로 이제 value를 저장하는 방법을 알아보자.

 

local storage API는 브라우저에게 뭔가를 기억할 수 있게 해주는 기능이다. 우리가 브라우저에 뭔가를 저장하고, 나중에 가져다 쓸 수 있다. local storage API를 보면 다양한 메서드들이 있는데 그 중 setItem을 활용하면 정보를 저장할 수 있다. local storage에 뭐가 들어있는지 보고 싶다면 개발자도구 - Application 에서 local storage를 확인하면 된다.

localStorage.setItem("저장할 값 이름", "저장할 값"); 과 같이 값을 저장하고

localStorage.getItem("불러올 값 이름"); 과 같이 값을 불러오고

localStorage.removeItem("삭제할 값 이름"); 과 같이 값을 제거할 수 있다.

 

다음과 같이 콘솔창에 값을 저장 후 확인해보면

값이 들어가 있는걸 확인할 수 있다. getItem,removeItem 호출도 잘 됨!

 

아래와 같이 username 값을 username 이름으로 저장해 주었다.

 

 

그랬더니 폼에서 이름 입력 후 버튼을 누르니 값이 잘 저장되고 있다!

 

 

 

---

   < Loading Username >

 

local storage가 비어 있으면 form부터 보여주면서 지금까지 해오던 걸 하면 된다. 하지만 유저정보가 있으면 form을 보여주면 안되고 h1태그를 보여줘야한다. 그러니 먼저 local storage에 유저정보 유무를 알아봐야 한다.

local storage에서 getItem으로 값을 받아올 때 값이 없으면 null 값을 가져온다. 이를 이용해 유저정보 유무를 알아볼 수 있다.

 

form와 h1태그를 모두 숨긴 상태로 시작한다.(hidden 클래스 추가 상태)

if문으로 savedUsername 값이 null인 경우, 즉 local storage에 유저정보가 없을 때 폼을 보여주고(hidden 클래스를 지워주고) eventListener를 추가해주었다.

그리고 local storage에 값이 있을 경우, h1을 표시해주고(hidden 클래스를 지워주고) innterText에 내용을 추가해준다.(값은 저장된 값, 즉 savedUsername을 넣어줌)

 

 

그러면 확인해보자!

local storage에서 유저정보를 지우고 새로고침하면 form이 표시되고, 입력하고 새로고침하면 인사말이 잘 나온다.

반복되어 나오는 [ greeting에 텍스트 추가 후 hidden class를 지워주는 코드 ] 는 paintGreetings 함수로 선언해서 사용했다.

중복되는 단어 코드 등은 변수나 함수로 선언해서 사용하기!! !!

 

---