쿠키(Cookies) & 세션 스토리지(SessionStorage) & 로컬 스토리지(LocalStorage)

쿠키 & 세션 스토리지 & 로컬 스토리지

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소 입니다.
그리고, HTML5가 나오기 이전에도 브라우저에 저장소 역활을 하는것이 쿠키 입니다.

 

쿠키(Cookies)

• 클라이언트(브라우저) 로컬에 저장되는 키와 값(Key/Value) 형태로 이루어져 있는 작은 데이터 파일 입니다.

 

쿠키의 특징

• 대부분의 브라우저가 지원을 합니다.
• 보안에 취약 합니다.
• 유효 시간동안 보관되기 때문에 유효 시간이 있을 경우 브라우저가 닫혀도 유지가 가능 합니다.
• 매 HTTP 요청마다 포함되어 서버로 전송되기 때문에 서버에 부담이 큽니다.
• 용량이 작습니다.(4KB)

 

쿠키의 동작 순서

1. HTTP 요청
2. 쿠키를 HTTP 헤더(Set-Cookie)에 담아서 응답
3. 쿠키 저장 / HTTP 재요청 (쿠키 포함)
4. 응답 (쿠키 업데이트 시 전달)

 

쿠키 사용 예시

• 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰의 장바구니 기능
• 자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니

---

세션 스토리지(SessionStorage)

• 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다.

 

세션의 특징

• 서버에서 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지 합니다.
• 사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안이 좋습니다. 하지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됩니다.

 

세션의 동작 순서

1. 클라이언트가 서버에 접속 시 세션 ID를 발급 받음
2. 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장하고 가지고 있음
3. 클라리언트는 서버에 요청할 때, 이 쿠키의 세션 ID를 같이 서버에 전달해서 요청
4. 서버는 세션 ID를 전달 받아서 별다른 작업없이 세션 ID로 세션에 있는 클라언트 정보를 가져와서 사용
5. 클라이언트 정보를 가지고 서버 요청을 처리하여 클라이언트에게 응답

 

세션 사용 예시

• 로그인 같이 보안상 중요한 작업을 수행할 때 사용

 

쿠키와 세션의 동작 방식 이미지

 

쿠키와 세션 비교

• 데이터 저장위치 : 쿠키는 클라이언트, 세션은 서버
• 보안 : 저장위치 때문에 쿠키는 스니핑에 당할 우려가 있지만, 세션은 쿠키를 이용해 세션 아이디만 저장하고 서버에서 처리하기때문에 보안성은 쿠키<세션
• 라이프 사이클 : 쿠키는 브라우저를 종료해도 만료기간이 남아있으면 존재, 세션은 브라우저 종료 시 - 만료기간에 상관없이 종료
• 속도 : 쿠키 > 세션

 

---

로컬 스토리지(LocalStorage)

• Html5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage 를 제공 합니다.

 

로컬 스토리지 특징

• 키와 값(Key/Value) 의 형태로 데이터를 저장 합니다.
• 쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않습니다. (명시적으로만 전송 가능)
• 영구적으로 저장되기 때문에 지속적으로 필요한 정보를 저장하기에 좋습니다.

 

참고

• https://it-eldorado.tistory.com/90
• https://www.wisecleaner.com/think-tank/292-What-are-Cookie--Session.html
• 쿠키와-세션-그리고-로컬-스토리지와-세션-스토리지
• MDN, HTTP 쿠키
• MDN, Window.localStorage