[Web] 쿠키와 웹 스토리지의 차이(로컬 스토리지 세션 스토리지)

 

1. 쿠키(Cookie)

• 정의:쿠키는 웹 서버가 클라이언트 브라우저에 저장하는 작은 데이터 조각
  • 용량: 일반적으로 최대 4KB까지 저장할 수 있음
  • 저장 기간: 만료 날짜를 설정할 수 있으며, 세션 쿠키는 브라우저가 닫힐 때 삭제
  • 전송: HTTP 요청 시 서버로 자동 전송, 매번 서버와 통신할 때 쿠키 데이터 사용 가능
  • 보안: 보안 설정을 통해 HttpOnly와 Secure 속성을 사용할 수 있음, 
    • HttpOnly: 자바스크립트에서 접근할 수 없도록 함
    • Secure: HTTPS 연결에서만 전송

---

2. 웹 스토리지 (Web Storage)

• 1.로컬 스토리지 (Local Storage)
  
  • 정의: 클라이언트 브라우저에 데이터를 영구적으로 저장하는 방법
  • 용량: 일반적으로 도메인 당 약 5MB에서 10MB까지 저장 가능
  • 저장 기간: 데이터는 명시적으로 삭제 시 까지 지속됨
  • 전송: HTTP 요청 시 자동으로 서버로 전송되지 않으며, 자바스크립트를 통해 접근하고 조작 해야 함
  • 사용 예: 사용자 설정,테마 설정 등 저장하는 데 유용
• 2. 세션 스토리지 (Session Storage)
  • 정의: 클라이언트 브라우저의 세션 동안 데이터를 저장하는 방법
  • 용량: 로컬 스토리지와 유사하게 약 5MB에서 10MB까지 저장 가능
  • 저장 기간: 브라우저의 탭이 닫히면 데이터가 삭제됨
  • 전송: 로컬 스토리지와 마찬가지로 HTTP 요청 시 자동으로 서버로 전송되지 않음
  • 사용 예: 로그인 상태 유지, 한 페이지에서만 필요한 데이터 저장 등

---

3. 쿠키 & 웹 스토리지 비교 요약

특징	쿠키	로컬 스토리지	세션 스토리지
데이터 용량	최대 4KB	약 5MB~10MB	약 5MB~10MB
저장 기간	만료 날짜 설정 가능	영구 저장	세션 종료시 삭제
자동 전송	HTTP 요청 시 자동 전송	자동 전송되지 않음	자동 전송되지 않음
데이터 접근	자바스크립트 및 서버 접근	자바스크립트에서 접근 가능	자바스크립트에서 접근 가능
보안	HttpOnly, Secure 속성	보안 설정 없음	보안 설정 없음

---