Cookie, Local Storage, Session Storage

1. Cookie

쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있다.

Components of Cookies

쿠키에는 추가 옵션 사항들을 적용할 수 있습니다.

• 이름: 각각의 쿠키를 구별하는 데 사용되는 이름
• 값: 쿠키의 이름과 관련된 값
• 유효시간: 쿠키의 유지시간
• httpOnly, secure : 쿠기들을 안전하게 보관할 수 있도록 보안 강화 기능
• 도메인: 쿠키를 전송할 도메인
• 경로: 쿠키를 전송할 요청 경로

cookies 작동원리

클라이언트가 페이지 요청을 한다 -> 서버에서 쿠키를 생성한다 -> HTTP 헤더에 쿠키를 포함시켜 응답한다 -> 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관한다 -> 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보낸다 -> 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP헤더에 포함시켜 응답한다

2. Local Storage

영구 저장소 로서 브라우저를 닫았다가 다시 열어도 계속 유지되는 것이 특징이다.

• 도메인마다 별로도 LocalStorage가 생성된다.
• 도메인만 같으면 전역으로 공유가 가능하다.
• Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

3. Session Storage

임시 저장소로서 브라우저가 열려있는 한 페이지를 Reload해도 계속 유지된다. 하지만 브라우저를 닫으면 삭제되는 것이 특징이다.

• Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다
• 데이터의 지속성과 액세스 범위에 특수한 제한이 존재한다. Web Storage의 기본 보안처럼 도메인별로 별도로 생성된다. 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.

4. Web Storage VS Cookie

• 쿠키는 매번 서버로 전송된다. 하지만 Web Storage는 저장된 데이터가 존재해서 확인을 할수 있게 해주는 것이기에 네트워크 트래픽 비용을 줄여준다.

• Web Storage는 단순 문자열을 넘어(스크립트) 객체 정보를 저장할 수 있다. 단, 브라우저의 지원 여부 확인 요망

• WEB Storage는 용량의 제한이 없다. 쿠키는 클라이언트에서 300개 사이트 20개, 하나의 쿠키 값은 최대 4KB이다.

• Web Storage는 영구 데이터 저장이 가능하다.