웹 서버는 캐시와 관련된 헤더를 응답에 포함시켜 웹 브라우저가 리소스를 ✅캐시에 저장하고 ✅재사용할 수 있게 한다.

이를 통해 웹페이지의 성능과 효율성을 향상시킬 수 있으며,
그러한 저장소를 웹 스토리지라고 한다.
🔻🔻🔻

웹 스토리지

• 웹 브라우저에서 클라이언트 측에 데이터를 저장하는 데 사용

• 웹 애플리케이션에서 데이터를 장기적으로 저장하고 유지할 수 있게 함

• 종류
  ✅ 로컬 스토리지
  ✅ 세션 스토리지

로컬 스토리지

개념

웹 스토리지 객체로 브라우저 내에 키-값 형태로 오리진에 종속되어 저장되는 데이터

💡 오리진
https://velog.io/write?id=dc959a16-e35f-4f87-98b5-0868f4260475라는 주소가 있을 때 https://velog.io까지를 의미

👉 프로토콜, 호스트 네임, 포트번호를 포함

특징

• 하나의 키에 하나의 값
• 사용자가 브라우저에서 삭제하지 않는 한 영원히 로컬저장소에 저장됨(만료날짜x)
• 최대 저장용량은 5MB

활용

보통 사용자의 행위를 기억하여 UX 개선에 활용
ex. 로그인 유지, 자동완성 등

세션 스토리지

세션 스토리지는 로컬 스토리지와 유사한 형식을 가지고 있다.
그래서 개념보다는 로컬과의 차이점을 알면 된다!

로컬 스토리지와 차이점

• 사용자가 브라우저에서 탭을 닫으면 데이터가 만료된다.

---

쿠키

개념

브라우저에 저장된 데이터 조각

원리

1. 서버가 응답헤더로 set-cookie를 보냄
   👉 쿠키의 이름, 값, 속성(예: 만료 날짜, 도메인, 경로 등) 등을 포함

2. 클라이언트의 요청헤더가 cookie로 설정됨

3. 쿠키가 브라우저의 쿠키 저장소에 저장되어 같은 웹사이트를 요청할 때마다 쿠키를 포함한 요청이 전송
   👉 사용자에 맞는 맞춤형 콘텐츠를 제공하거나 세션 상태를 유지

종류

🍪 세션 쿠키

브라우저가 닫힐 때 자동으로 삭제되는 임시 쿠키

🍪 영구 쿠기

만료 날짜가 설정되어 브라우저를 닫아도 유지되는 쿠키

사용목적

대체로 사용자 경험을 개선하고 웹사이트 기능을 지원하기 위해 사용됨

• 사용자 로그인 상태 유지
• 선호 언어 또는 테마 유지
• 장바구니 유지

SECURE

set-cookie가 secure로 설정되어있다면

💡 https로만 쿠키를 주고받을 수 있는 옵션

을 의미한다!

하지만 Chrome 52이상 또는 Firefox 52 이상인 브라우저라면 보안을 강화하고 안전하지 않은 사이트(HTTP)가 secure 지시문으로 쿠키 설정을 금지하기 때문에 ⭐이 옵션이 무시된다⭐.