공통점
- 브라우저에 캐싱함으로써 서버에 대한 요청 줄여 서버부하를 방지 가능
- 캐싱으로 인해 다운로드하는 컨텐츠 줄어 웹사이트 컨텐츠를 더 빨리 다운로드 가능
- 사이트 기본 설정 커스터마이징(색상, 글꼴 크기 등) 저장하거나 로그인 상태를 유지할 때 사용될 수 있음
차이점
| 쿠키 | 로컬 스토리지 | 세션 스토리지 |
|---|
| 최대 저장 용량 | 4KB | 5MB | 5MB |
| 브라우저 허용 | HTML4 + 5 | HTML 5 | HTML 5 |
| 접근 범위 | 오리진 | 오리진 | 탭 |
| 만료 기한 | 수동 | 영구적 | 탭 닫으면 소멸 |
| 설정할 수 있는 주체 | 클라 + 서버 | 클라 | 클라 |
| 요청과 함께 서버에 자동 전송 유무 | O | X | X |
로컬 스토리지
- 기간이 없음
- 사용자가 삭제안하는 이상 계속 브라우저에 있음
- 자동으로 서버로 전송 노노(쿠키는 자동으로 전송됨)
세션 스토리지
- 웹 스토리지 객체
- { key : value } 형태
- 오리진에 종속되어 저장되는 데이터
- 동일한 오리진이라도 브라우저의 각 탭마다 독립적으로 저장
- 즉, 다른 탭에서 세션 스토리지에 저장된 데이터 접근 불가
- 탭 닫으면 데이터 날라감
쿠키
- secure
- https 로만 쿠키 주고받게 하는 옵션
- Chrome v89, Firefox v75 이상부터 localhost에서는 이거 무시
- httponly
- JS로 쿠키 못 얻음
- document.cookie 불가
- samesite
- 요청이 동일한 도메인 에서 시작된 경우만 쿠키가 애플리케이션으로 전송되도록 허용