세션, 쿠키를 왜 사용하는가?
- 우선 그 전에 HTTP 프로토콜을 짚고 넘어가자.
HTTP 프로토콜
- 비연결지향 : 클라이언트가 서버에게 Request 를 보내고 서버가 클라이언트에게 Response 를 보내면 접속 종료
- 무상태 (stateless) : 데이터를 주고 받기 위한 각각의 데이터 요청이 독립적으로 관리, 즉 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다
- HTTP 프로토콜의 stateless 적 특징, 단점을 해결하기 위해 데이터 저장에 사용되는 것이 바로 쿠키, 세션이다.
쿠키
- 쿠키는 클라이언트 로컬에 저장되는 키와 값 형태의 작은 파일
- 이름, 값, 만료기간, 경로 정보가 들어있다
- 클라이언트의 브라우저 메모리 or 하드디스크에 저장이 된다
- 매번 서버에 전송되므로 크기가 클 경우, 서버에 부담이 갈 수 있다
- CSRF 취약 (SameSite 옵션이 Strict 가 아닐 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다)
- 대략 4KB 까지의 데이터를 저장할 수 있고 유효기간이 존재
- 대부분의 브라우저가 지원
쿠키는 언제 사용할까
- 세션 관리 : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 사용자 맞춤 : 사용자가 선호하는 옵션이나 테마 등의 세팅
- 사용자 추적 : 사용자의 행동을 기록하고 분석하는 용도
Web Storage
- 클라이언트에 데이터를 저장할 수 있도록 HTML5 부터 지원하는 저장소
- 키와 값 형태로 데이터 저장
- 쿠키와 달리, 서버에 전송되지 않아 부담이 가지 않는다. (명시적으로만 전송 가능)
- 쿠키와 달리, 필요한 경우에만 꺼내 쓸 수 있어 자동 전송 위험성이 없다
- 대략 5MB 까지의 데이터를 저장할 수 있고 유효기간이 존재하지 않는다
- HTML5 을 지원하지 않는 브라우저에서는 사용할 수 없다
- 두 가지의 종류,
로컬 스토리지와세션 스토리지가 있다.
- 로컬 스토리지와 세션 스토리지 는 window 객체의 프로퍼티로서 존재
- 같은 스토리지 객체를 상속하기 때문에 동일한 메소드를 가짐
- 이 두가지의 가장 큰 차이점은 데이터의 영구성
로컬 스토리지 (Local Storage)
window.localStorage객체- 브라우저를 종료해도 유지되는 데이터. 명시적으로 지우지 않는 한 영구적으로 저장
- 도메인별로 생성. 다른 도메인의 로컬 스토리지에는 접근이 불가능
- 서로 다른 브라우저 탭이라도 같은 도메인이라면 동일한 로컬 스토리지를 사용
- 자동 로그인 등 지속적으로 필요한 정보를 저장하기에 좋다
세션 스토리지 (Session Storage)
window.sessionStorage객체- 쿠키, 로컬과는 달리 탭/윈도우 단위로 생성
- window 객체와 동일한 유효 범위, 생존기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제
- 서로 다른 세션 스토리지는 독립적으로 동작
- 윈도우 복제로 생성된 경우에 혹은 새 창을 연 경우, 세션 스토리지가 복제되어 생성
- 입력 폼 저장, 일회성 로그인 등 잠시동안 필요한 정보를 저장하기에 좋다
Je vais l'essayer