https://media.vlpt.us/images/hoho_0815/post/e61610ae-9c13-4052-b946-bac3bffee2ea/html.webp
쿠키(Cookies) & 세션 스토리지(SessionStorage) & 로컬 스토리지(LocalStorage)
로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소 입니다.그리고, HTML5가 나오기 이전에도 브라우저에 저장소 역활을 하는것이 쿠키 입니다.
쿠키(Cookies)
: 클라이언트(브라우저) 로컬에 저장되는 키와 값(Key/Value) 형태로 이루어져 있는 작은 데이터 파일 입니다.
쿠키의 특징
- 대부분의 브라우저가 지원을 합니다.
- 보안에 취약 합니다.
- 유효 시간동안 보관되기 때문에 유효 시간이 있을 경우 브라우저가 닫혀도 유지가 가능 합니다.
- 매 HTTP 요청마다 포함되어 서버로 전송되기 때문에 서버에 부담이 큽니다.
- 용량이 작습니다.(4KB)
쿠키의 동작 순서
- HTTP 요청
- 쿠키를 HTTP 헤더(Set-Cookie)에 담아서 응답
- 쿠키 저장 / HTTP 재요청 (쿠키 포함)
- 응답 (쿠키 업데이트 시 전달)
쿠키 사용 예시
- 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
- 쇼핑몰의 장바구니 기능
- 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니
세션 스토리지(SessionStorage)
: 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다.
세션의 특징
- 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지 합니다.
- 사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안이 좋습니다. 하지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됩니다.
세션의 동작 순서
- 클라이언트가 서버에 접속 시 세션 ID를 발급 받음
- 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
- 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
- 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져와서 사용
- 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답
세션 사용 예시
- 로그인 같이 보안상 중요한 작업을 수행할 때 사용
쿠키와 세션의 동작 방식 이미지
쿠키와 세션 비교
- 데이터 저장위치 : 쿠키는 클라이언트, 세션은 서버
- 보안 : 저장위치 때문에 쿠키는 스니핑에 당할 우려가 있지만, 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기때문에 보안성은 쿠키<세션
- 라이프 사이클 : 쿠키는 브라우저를 종료해도 만료기간이 남아있으면 존재, 세션은 브라우저 종료 시 - 만료기간에 상관없이 종료
- 속도 : 쿠키 > 세션
로컬 스토리지(LocalStorage)
: Html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage 를 제공 합니다.
로컬 스토리지 특징
- 키와 값(Key/Value) 의 형태로 데이터를 저장 합니다.
- 쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않습니다. (명시적으로만 전송 가능)
- 영구적으로 저장되기 때문에 지속적으로 필요한 정보를 저장하기에 좋습니다.
참고
Coding is playing!