쿠키, 세션, 웹 스토리지, 캐시는 모두 웹 어플리케이션에서 데이터를 저장하고 관리하는 방식으로 이들의 차이점을 표로 정리하였다.
구분 | 쿠키(Cookie) | 세션(Session) | 웹 스토리지(Web Storage) | 캐시(Cache) |
데이터 유형 | 문자열, 숫자, 불리언 값 | 객체, 데이터 | 객체, 데이터(로컬 또는 세션 스토리지) | 객체, 데이터 |
저장 위치 | 클라이언트 | 서버 | 클라이언트 | 클라이언트 |
용량 제한 | 4KB | 제한 없음 | 보통 5MB | 브라우저 또는 서버 설정에 따름 |
만료 시간 설정 | 가능 | 가능 | 없음 | 가능 |
데이터 암호화 | 불가능 | 가능 | 가능 | 불가능 |
데이터 공유 여부 | 도메인 간 공유 가능 | 서버 내 공유 가능 | 도메인 간 공유 가능 | 브라우저 내 공유 가능 |
사용 예시 | 로그인 유지, 선호도 설정 | 사용자 세션 유지 | 온라인 스토리지, 웹 앱 오프라인 사용 | 데이터 조회 빈도가 높은 경우 캐싱 |
쿠키(Cookie)
사용자가 웹 사이트를 방문할 때, 그 사이트에서 생성되어 클라이언트 측에 저장되는 작은 데이터 파일로 주로 사용자의 인증 상태 유지, 사용자 선호도 저장 등에 사용된다. 쿠키는 서버가 클라이언트에게 응답할 때 Set-Cookie 헤더를 통해 전송되며, 클라이언트는 쿠키를 저장하고 이후에 해당 사이트에 요청할 때마다 쿠키를 서버에 전송한다.
1. 세션 쿠키(Session Cookie)
웹사이트 방문 시 서버에서 클라이언트(브라우저)로 전송되어 세션 기간(브라우저가 열려있는 동안) 동안 유지되는 쿠키
2. 영속 쿠키(Persistent Cookie)
웹사이트 방문 시 서버에서 클라이언트로 전송되어 만료 날짜(설정된 기간)까지 유지되는 쿠키
3. 보안 쿠키(Secure Cookie)
HTTPS 프로토콜을 사용하는 웹사이트에서만 전송되고, 노출되지 않도록 암호화된 쿠키
4. HttpOnly 쿠키(HttpOnly Cookie)
클라이언트 측에서 스크립트로 접근하지 못하도록 설정된 쿠키로, 이를 통해 XSS(Cross-Site Scripting) 공격을 방지할 수 있다.
5. SameSite 쿠키(SameSite Cookie)
같은 도메인에서만 쿠키가 전송되도록 설정된 쿠키로, 이를 통해 CSRF(Cross-Site Request Forgery) 공격을 방지할 수 있다.
6. Third-party 쿠키(Third-party Cookie)
서드파티의 웹사이트에서 생성된 쿠키로, 해당 웹사이트가 아닌 다른 웹사이트에서도 사용될 수 있다. 광고나 트래킹 등의 목적으로 사용된다.
세션(Session)
서버 측에서 유지하는 상태 정보로 클라이언트와 서버 간의 상태 정보를 유지하는 기술이다. 일반적으로 쿠키를 이용하여 구현되며, 서버에서 클라이언트마다 고유한 세션 ID를 발급하고, 이를 쿠키에 저장하여 클라이언트와 서버 간에 상태 정보를 유지한다. 세션은 보안성이 높고 쿠키보다 더 많은 데이터를 저장할 수 있으며 세션이 만료되면 삭제된다.
웹 스토리지(Web Storage)
HTML5에서 추가된 클라이언트 측 데이터 저장소로 쿠키와 달리 웹 스토리지는 클라이언트 측에서만 사용되며, 서버로 전송되지 않는다. 이러한 특징 때문에 웹 스토리지는 쿠키와 달리 사용자 데이터 보안을 보장할 수 있다. 데이터는 key-value 형태로 저장되며, 문자열 형태로 저장된다. 키와 달리 용량 제한이 크며(대개 5MB 이상), 서버에 데이터를 전송하지 않으므로 서버 부하를 줄일 수 있다. 따라서, 웹 스토리지는 사용자 개인 데이터의 저장과 관리에 매우 유용하다.
1. 로컬 스토리지(Local Storage)
브라우저에 데이터를 영구적으로 저장하여 브라우저를 종료해도 남아있고, 같은 도메인의 모든 페이지에서 접근할 수 있다.
2. 세션 스토리지(Session Storage)
브라우저에 데이터를 세션 기간(브라우저가 열려있는 동안) 동안만 저장하며, 같은 도메인의 같은 세션에서만 접근할 수 있다.
캐시(Cache)
캐시(Cache)란 컴퓨터에서 자주 사용되는 데이터를 미리 복사해 놓는 임시 저장소로, 원래 데이터를 가져오는 시간과 비용을 줄여주고, 데이터에 접근하는 속도를 높여줌으로써 서버의 부하를 줄이고 전체적인 성능을 향상시키는데 사용된다. 웹 페이지나 이미지 등을 한 번 다운로드하면 캐시에 저장해두고, 다음에 같은 페이지나 이미지를 요청할 때는 서버에서 다시 다운로드할 필요없이 캐시에서 바로 불러올 수 있다. 캐시에 저장된 데이터는 만료시간이 있어, 일정 기간이 지나면 자동으로 삭제된다.
1. 브라우저 캐시
브라우저 캐시는 웹 페이지의 정적 리소스(이미지, 스크립트, 스타일 시트 등)를 저장하는 브라우저의 임시 저장소이다. 브라우저는 웹 페이지를 처음 요청할 때 서버로부터 해당 리소스를 다운로드하여 캐시에 저장하고, 다음에 같은 페이지를 요청할 때는 캐시에서 불러와서 더 빠르게 보여준다.
2. 서버 캐시
서버 캐시는 웹 서버에서 자주 사용되는 데이터를 저장하는 임시 저장소이다. 서버 캐시는 데이터베이스 캐시, 파일 시스템 캐시 등 다양한 형태로 나타날 수 있고, 더 나은 성능을 위해 자주 업데이트되는 동적 데이터를 저장하기보다는, 정적인 데이터나 재사용 가능한 데이터를 저장하는 데에 주로 사용된다.
'JavaScript' 카테고리의 다른 글
[자바스크립트] 생성자 함수 (0) | 2023.05.16 |
---|---|
[자바스크립트] 프로퍼티 어트리뷰트(Property Attribute) (0) | 2023.05.10 |
[자바스크립트] var, let, const의 차이점 (0) | 2023.05.03 |
[자바스크립트] 스코프란? (0) | 2023.05.03 |
[자바스크립트] 호이스팅(Hoisting)이란? (0) | 2023.05.03 |