브라우저 저장소(쿠키, 웹스토리지, 로컬스토리지, 세션스토리지)

HTTP: 서버와 클라이언트가 서로 소통할 때 지켜야 할 규약 

HTTP는 먼저 클라이언트가 서버에게 request를 보내고 서버는 클라이언트에게 request에 대한 response를 보내고 접속을 종료합니다. 그리고 통신이 끝나면 상태(예를 들면 인증에 쓰이는 상태 정보)를 유지하지 않는다는 특징이 있습니다.

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

예를 들면 웹사이트에서 로그인을 해도 페이지를 이동할 때마다 로그인을 해주어야 합니다. 이런 경우 유저가 굉장히 불편함을 느낄 수 있습니다. 로그인한 정보를 어딘가에 저장해두면 문제를 쉽게 해결할 수 있습니다. 그리고 그때 사용하는 것이 브라우저의 스토리지 입니다. 

스토리지는 말 그대로 저장소를 뜻합니다. 브라우저의 저장공간이라고 이해하면 됩니다.

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

크롬 개발자 도구 - 어플리케이션 탭을 확인해보면 스토리지가 보이는데, 웹 스토리지의 로컬 스토리지와 세션스토리지, 그리고 쿠키가 보입니다. 웹스토리지와 쿠키 모두 해당 도메인에 대한 데이터를 브라우저에 저장합니다.

조금 더 자세히 살펴보면 쿠키는 서버가 클라이언트에게 전송하는 작은 데이터 파일입니다.

이름, 값, 도메인 정보, 경로 정보, 만료 일자와 시간 등의 정보가 담겨있습니다.

모든 브라우저에서 지원을 하지만 매번 서버에 전송이 되고 저장 용량이 작고 보안에 취약하다는 단점이 있습니다.

HTML5부터는 쿠키의 단점을 보완해 등장한 웹 스토리지를 주로 사용합니다. 

 

웹 스토리지는

쿠키와 기능은 유사하지만 클라이언트에 저장만 할 뿐 서버로 전송되진 않습니다.

그리고 키(key)와 값(value)의 형태로 데이터를 저장합니다.

 

웹 스토리지는 지속성에 따라 로컬 스토리지와 세션스토리지로 구분할 수가 있는데

로컬 스토리지는 브라우저 자체에 반영구적으로 데이터를 저장하고 브라우저를 종료해도 데이터가 유지됩니다.

세션 스토리지는 탭 윈도우 단위로 생성이 되고 탭 윈도우를 닫을 때 데이터가 삭제 된다는 특징이 있습니다. 사용방법도 매우 간단합니다.

각 스토리지의 특성을 살려서 자동 로그인 기능은 로컬 스토리지,

입력 폼 정보나 비로그인 장바구니 기능을 구현할 땐 세션 스토리지,

다시보지않기 팝업 창은 쿠키를 이용하면 좋습니다.

 

참고자료: https://youtu.be/5s--sLWzuZc