쿠키 / 웹스토리지 / 세션

Donghyun Kim·2022년 8월 3일

쿠키(Cookies)

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일.
document.cookie하면 현재 쿠키 정보가 나옴.
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지됨.
쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다.
클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠키값은 4KB까지 저장합니다.
Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있습니다.
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송
따라서 HTTP 통신은 비연결성, 무상태이기 때문에 쿠키에 담겨진 데이터를 이용해 요청에 따른 응답을 그때 그때 받기 위함

쿠키의 구성요소

이름(Name) : 각각의 쿠키를 구별하는 데 사용되는 이름
값(Value) : 쿠키의 이름과 관련된 값
유효시간(Expires) : 쿠키의 유지시간
도메인(Domain): 쿠키를 전송할 도메인
경로(Path): 쿠키를 전송할 요청 경로

Session Cookies

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

Persistent Cookies

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

웹 스토리지 (Web Storage)

쿠키의 문제점을 보완하기 위해 HTML5에서 등장
브라우저에서 제공하는 기본 API로 local storage와 session storage가 있다.
웹 브라우저 자체에 있는 특정 저장 공간(5MB ~ 10MB정도로 최대 용량)
쿠키와 유사히지만 훨씬 안정적
요청 시 Headers에 전송하지 않음 → CSRF, 트래픽 문제 해결
단순 Key, Value 문자열 뿐 아니라 객체 자체를 저장 가능

로컬 스토리지

사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있음 (영구성)
단, 동일한 브라우저를 사용할 때만 해당
지속적으로 필요한 데이터 저장(자동 로그인 등)

세션 스토리지

데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거
일시적으로 필요한 데이터 저장(일회성 로그인 정보, 입력폼 저장 등)

세션 (Session)

사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리한다.
서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
(이 세션ID는 통상 쿠키에 저장하여 클라이언트 서버간 통신시 인증 수단으로 사용 함)
접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정 가능하다.
데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.

정리

저장 위치에 따른 구분

클라이언트 브라우저 저장 방식
-> 쿠키, 웹 스토리지
서버 저장 방식
-> 세션

용도에 따른 구분

보안이 필요한 정보
-> 세션
클라이언트 서버간 통신을 위한 경량 정보
-> 쿠키
ex) JWT 토큰, 아이디/패스워드 저장, 팝업 여부 제어, 사용자의 장바구니 목록 조회 등
서버를 거치지 않고 브라우저내에서만의 사용을 위한 정보
-> 웹 스토리지 (로컬 스토리지 / 세션 스토리지)
- 브라우저 내 영구 저장
  -> 로컬 스토리지
  ex) 클릭 했던 페이지 정보, 자동 로그인 등
- 브라우저 닫기 전 까지만 저장
  -> 세션 스토리지
  ex) 입력 폼 정보, 비회원 장바구니 등