HTTP는 상태가 없는 (Stateless) 프로토콜이기 때문에 사용자가 웹 브라우저를 통해서 특정 웹사이트에 접속하게 될 경우 어떤 사용자가 접속했는지에 대한 정보를 파악할 수 없다. 따라서 쿠키 또는 세션을 사용하여 사용자를 구분하고 각 사용자에 맞는 정보를 제공한다.
Cookie?
쿠키는 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미한다.
클라이언트의 브라우저 메모리 혹은 하드디스크에 저장 된다.
대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재한다.
대부분의 브라우저가 지원한다.
클라이언트에 저장되기 때문에 보안에 취약하다는 단점이 있다.
SmaeSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다 (CSRF 취약)
Session?
세션은 브라우저가 서버에 연결되어 있는 동안 유지하는 데이터 집합이다.
클라이언트는 HTTP Session ID를 메모리 저장된 형태로 가지고 있다.
메모리에 저장하기 때문에 브라우저가 종료되면 사라지게 된다.
서버의 리소스를 쓰기 때문에 세션을 많이 사용하면 서버의 리소스를 많이 쓰게 된다.
세션을 사용하면 서버를 확장시키는 것이 어려워진다.
Web Storage?
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.
키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다.
쿠키와 달리 서버에 전송되지 않으므로 서버에 부담이 가지 않는다.
필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없다. (CSRF 안전)
대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다.
HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.
웹 스토리지의 종류로는 로컬 스토리지(Local Storgae)와 세션 스토리지(Session Storage)가 있다. 이들은 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드를 가진다. 이 둘의 가장 큰 차이점은 데이터의 영구성 이다.
Local Storage?
window.localStorage 객체
브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장된다.
도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.
지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인 등)
Session Storage?
window.sessionStorage 객체
세션 쿠키와 달리 탭/윈도우 단위로 세션 스토리지가 생성된다.
window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제된다.