브라우저 저장소 local storage, session storage, 쿠키

웹 개발을 하다보면 자주 접하는 쿠키와 웹스토리지.

오늘은 브라우저 저장소에 대해서 알아보겠습니다.

 

서버와 클라이언트가 서로 소통할 때는 HTTP 를 통해 통신합니다.

HTTP는 먼저 클라이언트가 서버에서 request를 보내고 서버는 클라이언트에게 request에 대한 response를 보내고 접속을 종료합니다.

그리고 통신이 끝나면 상태, 예를 들면 인증에 쓰이는 상태 정보를 유지하지 않는다는 특징이 있습니다.

이런 특징으로 계속해서 통신 연결을 하지 않기 때문에 자원의 낭비가 줄어든다는 것은 장점이지만 통신을 할 때 마다 새로운 연결을 해줘야해서 클라이언트는 그 때마다 인증을 해주어야한다는 단점이 있습니다. 

 

예를 들면 웹 사이트에서 로그인을 해도 페이지를 이동 할 때마다 로그인을 계속적으로 해주어야한다면 굉장히 불편할 것입니다.

로그인 한 정보를 어딘가에 저장해두면 이를 해결할 수 있습니다. 

 

이 때에 사용되는 것이 브라우저의 stroage 입니다.

storage는 말 그대로 저장소를 뜻합니다.

 

그리고 브라우저 저장소에는 쿠키와 웹 스토리지가 있습니다. 

웹 스토리지와 쿠키 모두 해당 도메인에 대한 데이터를 브라우저에 저장합니다. 

조금 더 살펴보면 쿠키는 서버가 클라이언트에게 전송하는 작은 데이터 파일입니다.쿠기에는 이름 값, 만료일자등의 정보가 담겨있으며 쿠키를 설정하면 이후의 모든 웹 요청은 쿠키 정보를 포함해서 서버로 전송이됩니다. 쿠키는 매번 서버에 전송이 되며 저장 용량이 작습니다. 또한 이는 보안에 취약합니다.

 

이를 보완하기 위해 웹스토리지가 등장했습니다. 웹스토리지는 쿠키와 기능은 유사하지만 클라이언트에 저장만 할 뿐 서버에 전송하지는 않습니다. 그리고 key, value의 값으로 저장합니다.

웹 스토리지는 지속성에 따라 로컬 스토리지와 세션 스토리지로 구분 할 수가 있는데 로컬 스토리지는 브라우저 자체에 반영구적으로 데이터를 저장을 하고, 데이터가 유지됩니다. 세션 스토리지는 탭 윕도우 단위로 생성이되고 탭 윈도우를 닫을 때 삭제된다는 특징이 있습니다. 

 

그럼 어떤 유형의 데이터를 어디에 저장하면 좋을까요? 

각 스토리지의 특성을 살려서 자동 로그인 기능은 로컬 스토리지, 입력 폼 정보다 비로그인 장바구니 기능을 구현할 때는 세션 스토리지, 다시 보지 않기 팝업창은 쿠키를 사용하면 좋을 것입니다.

 

 

* 아래의 영상을 본 후 작성하였습니다.

https://www.youtube.com/watch?v=5s--sLWzuZc