TIL 15 Cookie, localStorage 로그인유지

로그인 유지를위해 cookie, localStorage를 이용해야했다.

 

새로고침하면 redux에 있던 기존 데이터가 날라가면서 로그인이 유지가 안된다 따라서 cookie 와 localStorage에 기록을 남겨 새로고침시에도 데이터가 날라가지 않아서 그것을 이용하여 유지하도록 한다.

위와같이 module 부분 user에서 axios 로 로그인을 요청후 response로 받게되는 token 값을 localStorage.setItem을 이용하여 "token" 이라는 이름으로 그값을 넣고, 현재 유저정보도 axios 로 요청하여 response 얻게된걸 localStroage.setItem에 "nickname"이라는 변수로 닉네임을 넣어주었다.

nickname까지 넣어준건 새로고침시에도 nickname 이라는 토큰값이 남아있다면 그대로 쓰기위함인데 다음 header 부분을 보면 알수있다.

위와같이 header 컴포넌트에서 getCookie로 is_login 쿠키를 불러오고, localStroage.getItem으로 token 과 nickname 을 불러온다.

새로고침을 해도 if 문에서 cookie 와 token 이 남아있으므로 조건에 만족하므로 return 에 로그아웃 뷰가 보이게한다.

이때 text {nickname}님 환영합니다 를 넣어서 해당 닉네임으로 로그인한사람을 브라유저상에서 보여주게 한것이다.

 

만약 세션이란걸 이용하게되면 아래처럼 쓰면된다.

Cookies의 두 가지 유형

Cookies는 두 가지 유형이 있습니다. 바로 persistent cookies와 session cookies입니다.
Seesion cookies는 만료일을 포함하지 않습니다. 대신에 브라우저나 탭이 열려있는 동안에만 저장됩니다. 브라우저가 닫히면 cookies는 영구적으로 삭제됩니다. 이 유형의 cookies는 은행 웹사이트 내에서 작업을 하고 있다가 탭을 닫으면 모든 정보를 잊어버리기 때문에 은행 유저들의 자격 증명을 저장하는데 사용될 수 있습니다.

Persistent cookies는 만료일을 가집니다. 이 cookies는 만료일까지 유저의 디스크에 저장되고 만료일이 지나면 삭제됩니다. 유저들이 방문할때마다 유저 경험을 커스텀하기 위해 특정 웹사이트에서 행동을 기록하는 등 여러 활동들에 사용될 수 있습니다.

 

LocalStorage — 더욱 영구적인 솔루션

HTML5가 나온 이후, cookies의 많은 사용 방법들은 LocalStorage의 사용으로 대체되었습니다. LocalStorage는 cookies보다 더 많은 장점이 있기 때문입니다. 가장 중요한 차이점 중 하나는 cookies와는 달리모든 HTTP 요청에서 데이터를 주고받을 필요가 없다는 것입니다. HTTP 요청에서 데이터를 주고받지 않고 LocalStorage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있습니다.
데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문입니다.
또한 앞에서 언급했듯이 LocalStorage는 최대 5MB의 정보를 저장할 수 있습니다. 이것은 cookies가 보유할 수 있는 4KB보다 훨씬 더 많습니다.

LocalStorage의 만료 조건은 persistent cookies처럼 동작합니다. Javascript 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않습니다. 이 방식은더 오랜 시간동안 저장해야하는 큰 데이터에 유용합니다. 또한 LocalStorage를 사용하면 문자열 뿐만아니라 javascript의 primitives와 object도 저장할 수 있습니다.

 

결론

cookies는 더 작고 모든 HTTP 요청과함께 서버 정보를 다시 전달해주지만 LocalStorage는 더 크고 클라이언트 측에 정보를 보유할 수 있습니다.

 

쿠키 와 로컬스토리지 설명부분 출처 : 

쿠키 vs 로컬스토리지: 차이점은 무엇일까?