[CS] 웹 브라우저의 캐시

웹 브라우저의 캐시와 관련된 3가지 개념인 로컬 스토리지, 세션 스토리지, 쿠키에 대해 알아보자

로컬 스토리지

• 브라우저 내에 {key:value} 형태로 오리진에 종속되어 데이터를 저장하는 객체

• ⭐ 오리진 (프로토콜 + hostname + port) 이 같은 브라우저 내에서 로컬 스토리지가 공유된다

• 사용자의 행위를 기억할 때 주로 사용된다

  • 로그인 유지(사용자가 id/pw로 로그인 시 서버가 token을 제공, 제공받은 token을 로컬 스토리지에 저장. 사용자가 2번째 로그인시는 token을 authorization 헤더에 담아서 보내서 로그인을 유지)
  • 사용자의 환경 설정 정보 저장(=캐싱)

• 데이터를 사용자가 수동으로 삭제하지 않는 한 평생 동안 로컬 스토리지에 저장됨

• 최대 저장용량 : 5MB

세션 스토리지

• 로컬 스토리지와 유사하지만, 사용자가 브라우저 탭을 닫으면 데이터가 만료된다는 특징 존재
• 세션 동안만 데이터를 유지
• 임시적인 데이터를 저장할 때 사용된다
• 최대 저장용량 : 5MB

쿠키

• 브라우저에 저장된 데이터 조각, 클라이언트와 서버 양쪽에서 조작이 가능
  • 하지만 보안상의 이유로 주로 서버에서 설정하고 컨트롤
• 로그인 상태 유지, 장바구니, 사용자 커스터마이징 등에 사용
• 최대 저장용량 : 4KB
• 쿠키의 여러 옵션
  • secure: https로만 쿠키 전송 가능 옵션이지만 Chrome v89 이상 또는 firefox v75 이상부터는 localhost에서 이 옵션을 무시
  • httponly: 자바스크립트로 쿠키에 접근할 수 없게 함

공통점과 차이점

1. 공통점 ⭐

• 브라우저에 캐싱을 함으로써 서버에 대한 요청을 줄여 서버 부하 방지
• 캐싱으로 인해 다운로드하는 컨텐츠가 줄어들어 웹사이트의 컨텐츠를 더 빨리 다운로드 가능
• 사이트 기본설정 커스터마이징(다크모드, 색상, 글꼴)을 저장하거나, 로그인 상태를 유지할 때 사용될 수 있음

2. 차이점 ⭐

	쿠키	로컬 스토리지	세션 스토리지
최대 저장 용량	4KB	5MB	5MB
브라우저 허용	HTML4 + 5	HTML5	HTML 5
접근 범위	창	창	탭
만료 기한	수동으로 설정	영구적	탭 닫으면 소멺
설정할 수 있는 주체	서버 + 클라이언트	클라이언트	클라이언트
요청과 함께 서버에 자동 전송 유무	O	X	X

---

REF