HTTP 프로토콜은 stateless와 connectionless라는 특성을 갖는다.
즉 클라이언트와 서버가 데이터를 주고 받을 때는 항상 초면인 상태라는 것이다.
그러나 우리는 그에 반하는 경험을 많이 해왔다.
웹사이트를 이용할 때마다 매번 로그인할 필요도 없고, 장바구니에 물건을 담고 페이지를 나갔다 들어오더라도 물건은 장바구니에 그대로 담겨 있다.
어떻게 이것이 가능했을까?
어떻게 클라이언트와 서버 사이에 연결이 끊겨도 데이터를 기억할 수 있었을까?
그 해답이 바로 쿠키, 세션 그리고 웹 스토리지다.
쿠키
- 클라이언트와 서버의 연결이 끊겨도 필요한 정보를 기억하게 하기 위해 서버에서 데이터를 묶어서 클라이언트의 컴퓨터 또는 브라우저의 메모리에 저장되는 key-value로 이루어진 작은 텍스트 파일
- 사용자가 따로 요청하지 않아도 Request 시 브라우저가 Request Header에 넣어서 자동으로 서버에 전송한다.
- 하나의 쿠키는 4KB까지 저장할 수 있다.
세션
- 서버에서 데이터를 관리하고 고유 ID를 생성해 클라이언트를 식별하는 방법
- 서버는 연결된 클라이언트의 브라우저에 단 1개의 세션 ID를 생성하고 이를 쿠키에 저장시켜서 클라이언트에게 전송한다. (
세션 쿠키) - 해당 도메인에 클라이언트가 다시 들어오면 쿠키 안에 저장된 세션 ID를 보고 클라이언트를 식별한다.
- 데이터를 서버에 저장하며 브라우저를 닫으면 세션 쿠키는 삭제되므로 보안 면에서 쿠키보다 뛰어나지만, 사용자가 많아질수록 서버의 자원을 많이 사용하게 된다는 단점이 있다.
- 따라서 중요한 정보를 기억하기 위해 사용된다. (로그인 상태 유지 등)
웹 스토리지
- HTML5부터 지원하게 된 클라이언트에 데이터를 저장하는 API
- 4KB의 제한이 있는 쿠키와 달리 최소 2MB의 정보를 저장할 수 있다.
- 자동 전송되는 쿠키와 달리 서버에 자동으로 전송되지 않는다.
(그렇기 때문에 많은 용량을 저장할 수 있기도 하다.) - 오리진(도메인, 프로토콜, 포트) 단위로 접근이 제한되는 특성 덕분에 CSRF로부터 안전하다.
- 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 JavaScript 내에서만 수행한다.
- 문자형 데이터 타입만 지원한다.
로컬 스토리지
- 로컬 스토리지는 웹 도메인 당 1개씩 생성된다.
- 세션 스토리지와 다르게 새 창을 띄워도 도메인만 같으면 동일한 데이터를 공유하게 되고, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
- 데이터를 영구적으로 저장할 수 있다. 쿠키는 만료일자가 넘으면 삭제되고 세션은 서버가 종료되거나 브라우저를 종료하면 삭제되는 반면 로컬 스토리지는 사용자가 삭제하기 전까지 유지할 수 있다.
- 쿠키를 이용하지 않는 앱 환경에서 자동 로그인 기능 등에 주로 사용된다.
세션 스토리지
- 새 창, 새 탭의 단위로 스토리지가 생성되며 데이터를 공유하지 않는다. 같은 탭이라도 도메인이 다르면 또다른 세션 스토리지가 생성된다.
- 즉, 세션 스토리지는 도메인, 윈도우 탭별 독립적인 공간이다.
- 그러므로 사용자가 브라우저의 창을 닫거나 탭을 닫으면 저장된 객체가 사라져 잠깐의 정보를 저장하기에 용이하다.
- 주로 회원가입 입력 폼, 일회성 로그인 등에 사용된다.
참고
