웹브라우저와 캐시

로컬스토리지

웹 브라우저에 데이터를 저장하고 관리할 수 있는 웹 스토리지 객체.

브라우저 내에 키-값 쌍을 저장할 수 있게 함

 

key-value 쌍으로 데이터 저장

키-값 쌍으로 데이터를 저장

키, 값 모두 문자열이어야 함 -> 어떤 타입의 데이터를 넣더라도 모두 문자열로 변환됨

영구적인 데이터 저장 및 용량

브라우저를 종료해도 계속 남아있다.

로컬 스토리지는 보통 5~10mb의 용량 제한으로, 비교적 넉넉하다

 

오리진별로 생성됨

다른 오리진의 로컬 스토리지에는 접근 불가

서로 다른 브라우저 탭이어도, 동일한 오리진이라면 동일한 로컬 스토리지 사용

 

오리진

프로토콜+도메인+포트

캐싱

웹 캐시 또는 HTTP 캐시는 서버 부하를 방지하기 위해 웹 문서, 이미지 등의 자원을 임시 사용자 웹 브라우저에 저장하는 기술로 HTTP 통신시 임시 저장된 캐시가 있다면 불필요한 데이터 전송을 줄이고 서버에 불필요한 요청을 줄여주어 빠른 통신이 가능해진다.

세션스토리지

웹 스토리지 객체로, 로컬 스토리지에서 

클라이언트 측에 데이터가 저장됨 -> 서버 통신 없이 데이터를 읽고 쓸 수 있다.

 

세션스토리지는 브라우저 탭에 종속됨

새로고침해도 유지되나,

origin이 같아도 다른 탭을 열어 데이터를 확인한다면 null 반환(브라우저 탭에도 종속되어 있기 때문!)

브라우저 종료 즉시 데이터가 삭제됨

 

쿠키

쿠키는 클라이언트, 즉 사용자의 웹 브라우저에 데이터를 저장하는 매커니즘

클라이언트와 서버간의 상태를 유지하고 웹 사이트에서 사용자 데이터를 저장하기 위해 됨

key=value 쌍으로 이루어져 있으며, 각 쌍은 ; 로 구분

 

작은 용량, 크기 제한

4kb의 데이터 크기 제한

(브라우저-서버 간 트래픽 최소화. 쿠키는 서버에 요청을 보낼 때마다 함께 전송된다!)

 

도메인 및 경로 제한

path, domain 옵션으로 특정 도메인/경로 제한 설정 가능

설정 시 쿠키를 도메인과 경로에서만 사용할 수 있다

 

만료 날짜 설정

직접 만료 날짜 설정 가능

날짜 미설정 시 세션 쿠키로 간주 -> 브라우저 종료될 때 삭제

GMT 포맷으로 설정되어야 함

 

https://velog.io/@jellyjw/%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%BF%A0%ED%82%A4%EC%9D%98-%EA%B0%9C%EB%85%90-%EB%B0%8F-%EC%B0%A8%EC%9D%B4%EC%A0%90

로컬스토리지, 세션스토리지, 쿠키 개념 정리

https://velog.io/@adc0612/%EC%9B%B9-%EC%A0%80%EC%9E%A5%EC%86%8C-2.-%EC%9B%B9-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

웹 저장소 - 2. 웹 스토리지 (로컬 스토리지, 세션 스토리지)

 

https://velog.io/@mirrorkyh/%EC%9B%B9%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EC%BA%90%EC%8B%9C-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80%EC%99%80-%EC%98%A4%EB%A6%AC%EC%A7%84

웹브라우저의 캐시 - 로컬스토리지와 오리진

https://medium.com/gdana/localstorage-sessionstorage-cookie-cache-6ac9f776ab67

localStorage, sessionStorage, Cookie, Cache