웹브라우저의 캐시 #4. 로컬스토리지, 세션스토리지, 쿠키의 공통점과 차이점
공통점
- 브라우저에 캐싱을 함으로써 서버에 대한 요청을 줄여 서버부하를 방지할 수 있다.
- 세 개 모두 어떤 브라우저의 데이터 조각임
이걸 기반으로 뭘 할수있냐
서버에다가 요청을 한다 치자
요청해야할 정보를 이미 쿠키 등에 캐싱을 해두었기때문에 요청할 필요가 없으니 서버부하가 감소한다는 것
- 캐싱으로 인해 다운로드하는 컨텐츠가 줄어들어 웹사이트의 컨텐츠를 더 빨리 다운로드가 가능하다.
- 서버에다가 100개를 요청해서 100개를 받아
그중 20개를 이미 로컬스토리지나 세션스토리지에 저장해뒀어
100개 다 필요없고 80개만 필요하니까 더 빨리 다운로드가 가능함
- 사이트 기본 설정 커스터마이징(색상, 글꼴 크기 등)을 저장하거나 로그인 상태를 유지할 때 사용될 수 있다.
- 라이트/다크모드같은거. 로그인상태 유지
차이점
| 특성 | 쿠키 | 로컬스토리지 | 세션스토리지 |
|---|---|---|---|
| 최대저장용량 | 4KB | 5MB | 5MB |
| 브라우저 허용 | HTML4 + 5 | HTML5 | HTML5 |
| 접근 범위 | 오리진 | 오리진 | 탭 |
| 만료 기한 | 수동으로 설정 | 영구적 | 탭 닫으면 소멸 |
| 설정 주체 | 클라이언트 + 서버 | 클라이언트 | 클라이언트 |
| 서버 자동전송 | O | X | X |
쿠키와 로컬스토리지는 오리진이 같은 여러개의 창이나 탭을 닫아도 유지가 된다.
제니벨로그