[CS] cookie,session,webstorage 차이

김채운·2022년 10월 3일
0

CS

목록 보기
3/9

첫 번째로 cookie에 대해 설명하기에 앞서 HTTP에 대해서 먼저 알아야 한다.
HTTP는 stateless 프로토콜이기 때문에 과거에 교환됐었던 request와 reponse의 상태를 저장하지 않는다. 그렇기 때문에 과거의 상태를 바탕으로 현재의 request를 처리하는건 불가하다.
그래서 이와같은 문제점을 해결하기 위해서 쿠키라는 시스템이 도입된 것이다. 쿠키는 서버에서 보내온 Set-Cookie라는 헤더필드에의해 클라이언트에 보존하게 된다. 그래서 다음번에 클라이언트가같은 서버로 요청을 보낼 때, 자동으로 쿠키값을 넣어서 보낸다. 그럼 서버에서 클라이언트가 보내온 쿠키로 확인해서 어느 클라이언트인지 체크하고 서버 상의 기록을 확인해서 이전의 상태를 알 수 있게 되는 것이다.

  • 쿠키는 클라이언트가 서버쪽에 방문한 기록에 대한 정보들을 클라이언트 단에 key, value 형식으로 값을 저장하는 작은 파일을 의미한다.
  • 만료일(expiration date)는 각 데이터마다 설정된 기간동안으로 지정되어서, 지정된 날짜가 지나면 자동으로 제거된다.(만료일자를 지정하지 않으면 세션 쿠키가 된다.)
  • 쿠키는 개수와 용량에 제한이 있다. 클라이언트에는 300개, 도메인에는 20개까지만 저장이 가능하고, 4KB 이하의 저장공간을 가진다.
  • 같은 도메인 상에서 쿠키 값은 공유된다.
  • 주로 Server-Side에서 사용되는 데이터를 저장한다.
  • 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장된다.
  • 클라이언트에 저장돼서 보안에 취약하다.
  • 매번 api 요청마다 함께 전송됩니다. (header 부분에 Access-Control-Allow-Credentials를 true 설정 시) 그러므로 서버에 부담이 증가되는 단점이 있다.

적은 데이터를 저장할 수 있을 때, 하나의 URL에 대하여 어느 tab(창)에서도 같은 브라우저 데이터를 원할때, 서버에 브라우저에 저장한 데이터를 그대로 전송하고 싶을 때 사용

Session

  • 'session'은 브라우저가 서버에 연결되어 있는 동안에 유지되는 데이터 집합이다.
  • 클라이언트는 HTTP Session ID를 메모리에 저장된 형태로 가지고 있다.
  • 메모리에 저장되기 때문에 브라우저가 종료될 때 즉시 사라지게 된다.
  • 서버의 리소스를 쓰기 때문에 세션을 많이 사용하면 서버의 리소스를 많이 쓰게된다.
  • 위와같은 이유로 세션을 사용하면 서버를 확장시키는 것이 어려워진다.

Web Storage

webstorage는 클라이언트 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.
형태는 key와 value의 형태로 데이터를 저장하고, 쿠키의 단점이 보완되어 서버로 전송되지 않아서버에 부담이 가지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 된다.
대략 5MB까지의 데이터가 저장이 되어 cookie와 비교하면 훨씬 더 많은 데이터의 저장이 가능하며, 유효기간도 따로 존재하지 않는다.
web storage는 데이터의 지속성(기간만료)에 따라 두 종류로 저장소가 나뉜다.(LocalStorage,SessionStorage)

Local Storage

  • window.localStorage 객체
  • 데이터의 만료기간이 없으며 브라우저를 종료해도 유지가 되고, 사용자가 데이터를 지우지 않은 한 영구적으로 보존된다.
  • 도메인 별로 생성이 되며, 다른 도메인의 로컬스토리지에는 접근이 불가능하다.
  • 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬스토리지를 사용한다.
  • 사이트 재 방문시에 이전에 저장되었던 정보를 이용할 수 있어 활용도가 높다.
  • 사용자의 설정 저장, 브라우저를 열고 닫았을때도 정보가 남아야 하는 것들을 저장할 때 사용한다.
  • key/value의 형태로 저장이 된다.
  • Javascript/HTML을 통해서만 데이터에 접근이 가능하다.
  • localstorage의 데이터는 api 호출에는 담을 수 없기 때문에 서버 전송이 불가함.
  • string data(문자열 데이터)로 저장이 제한됨. 따라서 용이하게사용하기 위해서는 직렬화(String)가 필요하다.

브라우저 데이터의 영구보관, 서로 다른 tab(창)이더라도 같은 URL이면 같은 데이터를 가져야 할 때, 보안적으로 민감한 데이터를 가지고 있지 않을 때 사용할 목적이면 local storage를 사용하는게 좋다.

Session Storage

  • window.sessionStorage 객체
  • session 기간에만 데이터를 저장한다 즉, browser(또는 tab)이 꺼진다면 데이터는 소실된다. (보안 측면에서 유리)
  • 같은 주소의 URL의 창을 여러개 열어도 각각의 창은 별도의 Session Storage를 갖는다.
  • 그래서 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
  • 잠시동안 필요한 정보를 저장하기에 좋다 ex) 일회성 로그인, 입력 폼 저장
  • localstorage와 마찬가지로 Session Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (client 에서만 저장 데이터 조회가능)
  • 일반적으로 HTTP Reqeust/Response 에서 말하는 Session과는 다른 개념이다.

tab(창)이 닫히면 데이터도 같이 소멸되어야 할 때, user session과 같이 보안에 민감한 데이터를 저장해야 될 때, 같은 URL인데 서로다른 tab마다 다른 데이터를 가져야 할 때 사용하면 좋다.

참조👇

0개의 댓글