/ ETC

쿠키와 웹스토리지에 대해

기타 포스팅입니다.




이번 글에서는 쿠키와 웹스토리지(로컬스토리지, 세션스토리지)에 대해서 정리해보겠습니다.

배경


HTTP는 클라이언트와 서버간에 소통을 할 때 지켜야할 통신규약입니다. 먼저 클라이언트가 서버에게 요청을 보내고 서버는 그에 맞는 응답을 보낸 후 접속을 종료합니다. 통신이 끝나면 상태정보를 유지하지 않는 특징이 있습니다. 예를 들어 인증에 필요한 상태정보를 말이죠. 그래서 통신을 할 때마다 새로 연결을 해주어야 합니다.

물론 지속적으로 통신을 연결하지 않는 것은 자원을 낭비하지 않는 장점이 있을 수 있지만, 통신을 할 때마다 인증을 해주어야 합니다.
이런 경우 반복적인 인증작업이 필요한데 이런 면에서 비효율적이게 됩니다. 유저도 불편하겠죠.

그래서 이런 정보를 따로 저장해두기위한 것이 브라우저 저장소입니다. 브라우저 저장소에는 쿠키와 웹 스토리지가 있습니다.

쿠키


쿠키는 서버가 클라이언트에게 전송하는 작은 데이터 파일이며 이름, 값, 도메인정보, 경로정보, 만료일 등으로 구성됩니다. 쿠키특징은 다음과 같은 것들이 있습니다.

  • 모든브라우저에서 지원함.
  • 매번 서버에 전송되고 저장 용량이 작음. (하나의 쿠키는 4KB까지 저장 가능)
  • 보안에 취약함.
  • 클라이언트에 총 300개의 쿠키를 저장할 수 있고 하나의 도메인 당 20개의 쿠키를 가질 수 있음.

웹 스토리지


HTML5부터 쿠키의 단점을 보완하여 등장한 것이 웹 스토리지(Web Storage)가 주로 사용됩니다. 웹 스토리지는 쿠키와 기능은 유사하지만, 서버로 전송되지 않고 클라이언트에 저장합니다. 데이터를 저장할 때는 key와 value값으로 저장합니다.

웹 스토리지는 데이터의 지속성에 따라 Local Storage(로컬 스토리지)와 Session Storage(세션 스토리지)로 나눌 수 있습니다. 차이점은 다음과 같습니다.

  • Local Storage(로컬 스토리지) : 브라우저 자체에 반영구적으로 데이터를 저장하며 브라우저를 닫아도 데이터가 유지되는 특징
  • Session Storage(세션 스토리지) : 윈도우나 브라우저 탭을 닫을 경우에 데이터가 삭제됩니다.

무엇을 사용하는게 좋은가?


이는 각 브라우저 저장소의 특징에 맞게 상황에 따라 사용합니다.
예를 들어 비로그인 유저 장바구니 기능은 세션스토리지, 자동로그인기능은 로컬스토리지, “일주일간 다시 보지 않기” 창 같은 경우는 쿠키를 사용하면 좋을 것 같습니다.

End.