쿠키, 세션, 웹스토리지
쿠키
쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값 형태의 작은 파일로, 이름, 값, 만료시간, 경로정보가 들어있다.
클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.
클라이언트에 300개까지 저장이 가능하고 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB까지 저장이 가능하다.
Response Header에 set-cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
만들어진 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 사이에 Request Header를 넣어서 자동으로 서버에 전송한다.
아래 3가지의 목적을 위해 사용된다.
- 세션관리: 서버에 저장해야할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 사용자 맞춤: 사용자가 선호하는 옵션이나 테마 등의 세팅
- 사용자 추적: 사용자의 행동을 분석하고 기록하는 용도
세션
사용자 정보를 파일 브라우저에 저장하는 쿠키와 달리, 세션은 서버측에서 관리한다.
서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
접속 시간에 제한을 두어 일정 시간 응답이 없다면, 정보가 유지되지 않게 설정 가능하다.
데이터를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.
클라이언트가 Request를 보내면 Response에 set-cookie를 통해 클라이언트의 유일한 ID값을 생성해 부여하고, 이를 통해 사용자 정보는 안전한 서버에 존재하며 클라이언트와 서버간에는 id값만을 전달해 보안 위협을 감소시켜준다.
쿠키와 세션의 차이점
- 데이터 저장위치
- 쿠키: 클라이언트(브라우저)
- 세션: 서버
- 보안: 저장 위치 때문에 쿠키는 스니핑에 당할 유려가 있지만, 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기 때문에 보안성은 세션이 더 낫다.
- 라이프사이클: 쿠키는 브라우저를 종료해도 만료기간이 남아있으면 존재, 세션은 브라우저 종료 시 만료기간에 상관없이 종료
- 속도: 쿠키가 세션보다 빠르다.
웹 스토리지
클라이언트(브라우저)에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소이다.
간단한 Key-Value 스토리지 형태로 쿠키와 달리 자동 전송 위험성이 없다.
오리진(도메인, 프로토콜, 포트)단위로 접근이 제한되는 특성 덕분에 CSRF로부터 안전하다.
쿠키보다 큰 저장 용량을 지원한다.(모바일 2.5MB, 데스크탑 5~10MB)
서버가 HTTP헤더를 통해 스토리지 객체를 조작할 수 없다.(자바스크립트 내에서만 수행가능)
오직 문자형 데이터타입만 지원한다.
로컬 스토리지, 세션스토리지가 있으며 같은 스토리지 객체를 상속하기 때문에 메서드가 동일하다.
로컬 스토리지
사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있다.
단, 동일한 브라우저를 사용할 때만 해당이 된다.
자동 로그인 같이 지속적으로 필요한 데이터를 저장할 수 있다.
세션 스토리지
데이터가 오리진 뿐만 아니라 브라우저 탭에도 종속되기 때문에 윈도우나 브라우저 탭을 닫을 경우 제거된다.
따라서 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터를 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 제거된다.
일회성 로그인정보나 입력폼 저장 등 일시적으로 필요한 데이터를 저장할 때 쓰인다.