본문 바로가기
개발 공부 일지/CS

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

by yelimu 2024. 9. 2.

쿠키는 서버와 클라이언트 간의 상태를 유지하는 간단한 설정에 쓰이고,

로컬스토리지는 자주 변경하지 않는 장기간 데이터를 저장 할 때,

세션 스토리지는 특정 세션 동안만 사용해야 할 데이터를 저장할 때 사용합니다.

 

- 공통점 : 웹 애플리케이션에서 사용자 정보를 저장하기 위해 사용되는 메커니즘, 클라이언트에서 저장하는 정보.

 

- 각 특징

1. 쿠키 : 서버가 클라이언트에 설정하는 작은 크기의 텍스트 파일이며, 클라이언트가 서버에 요청할 때마다 쿠키가 자동으로 서버에 전송된다. 이로 인해 서버는 클라이언트를 식별하거나 상태 정보를 유지할 수 있다.

 

각 쿠키의 크기는 일반적으로 4KB로 제한되며, 브라우저마다 저장할 수 있는 쿠키의 개수에도 제한이 있다.

유효 기간은 서버에서 설정된다

 

쿠키는 클라이언트 측에서 쉽게 접근할 수 있기 때문에 민감한 정보 저장에 적합하지 않다. 쿠키는 또한 XSS(교차 사이트 스크립팅) 공격에 취약할 수 있다.

 

  - 사용 예시 : 로그인 상태 유지, 트래킹 (웹사이트 방문자 추적 또는 사용자 맞춤형 광고를 제공하기 위해 사용)

 

2. 로컬 스토리지 : 브라우저에 데이터를 영구적으로 저장하는 메커니즘.

브라우저 종료, 컴퓨터 재부팅 후에도 데이터가 유지되며, 쿠키보다 많은 양의 데이터를 저장할 수 있다.

 

동일한 도메인 내의 모든 페이지에서 로컬 스토리지 데이터를 공유할 수 있다. = 세션간의 정보 공유 

 

로컬 스토리지에 저장된 데이터는 클라이언트 측에서만 접근 가능하며, 서버와 자동으로 공유되지 않지만 JavaScript를 통해 접근 가능하기 때문에, 민감한 데이터를 저장하는 데는 적합하지 않다.

 

  - 사용 예시 : 사용자의 설정 저장, 장바구니 정보 저장

 

3. 세션 스토리지 : 브라우저 세션 기반으로 데이터를 임시로 저장하는 메커니즘.

세션을 닫으면 데이터가 삭제된다.

 

브라우저 탭이나 창을 닫으면 데이터가 삭제. 즉, 세션 스토리지는 브라우저의 각 탭마다 독립적으로 유지

= 각 브라우저 탭/창이 서로의 세션 스토리지에 접근할 수 없다.

 

  - 사용 예시 : 페이지 간에 데이터를 전달, 검색 결과와 같은 임시 데이터를 저장한다. 

 

 

 

 

 

 

 

https://velog.io/@jeonsangmin_/cs-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8