브라우저의 캐시

1. 로컬스토리지의 개념
   • 로컬스토리지는 웹 스토리지 객체오 브라우저 내에 key : value 형태로 오리진에 종속되어 저장되는 데이터이다.
     (오리진이 같은 브라우저 내에서 공유된다.)
   • 하나의 키에 오로지 하나의 값만 저장된다.
   • 데이터는 사용자가 브라우저에서 수동으로 삭제하지 않는 한 평생동안 로컬 저장소에 저장되며 만료 날짜가 없다. 사용자가 창이나 탭을 닫아도, 컴퓨터를 종료해도 만료되지 않는다.
   • 최대 저장용량은 5MB다.
   • 보통 사용자의 행위를 기억할 때, 로그인을 유지하기 위한 값 등으로 사용되며 로컬 스토리지 데이터는 자동으로 서버로 전송되지 않는다. (쿠키는 자동으로 전송된다.)
2. 오리진
   

   

• 위의 이미지의 주소 부분에서 포트번호까지의 경로를 오리진이라고 한다.
• 로컬 스토리지는 오리진에서 공유된다는 뜻은 이 경로까지가 같은 부분에 대해서 페이지를 이동하든 해도 로컬스토리지가 공유된다는 뜻이다.

3. 로컬스토리지의 활용 예시: 검색기록 캐싱

• 특정 검색기록 목록을 보여주기 위해 검색을 할 때마다 로컬스토리지에 저장하여 검색기록을 캐싱한다.

4. 세션스토리지

• 세션스토리지 또한 로컬스토리지 처럼 key : value 형태로 오리진에 종속되어 자장되는 데이터다.
• 다만 세션스토리지는 브라우저의 각 탭마다 독립적으로 저장된다. 탭 간에는 간섭이 없다.
• 최대 저장용량은 마찬가지로 5MB다.
• 브라우저에서 탭을 닫으면 데이터는 만료된다.
• 보통은 세션스토리지보다 로컬스토리지를 더 많이 쓴다.

5. 쿠키

• 쿠키는 브라우저에 저장된 데이터 조각이다. 클라이언트에서 먼저 설정할 수도 있고 서버에서도 먼저 설정할 수도 있으나 보통은 서버에서 먼저 설정하는 게 일반적이다.
• 서버에서 응답헤더로 Set-Cookie를 넣으면 그 때부터 클라이언트에서 요청헤더 Cookie에 설정되어 자동으로 서버에 전달되게 되고 브라우저에도 저장된다.
• 쿠키의 생명주기는 보통 서버에서 만료기한 등을 설정한다.
• 쿠키의 최대 저장용량은 4kb이다.
• 보통 로그인, 장바구니, 사용자 커스터마이징, 사용자 행동분석(광고)에 사용된다.
• 세션 쿠키
  • 세션 쿠키는 Expires 또는 Max-Age 속성을 지정하지 않는 것이다. 브라우저가 종료되면 쿠키도 삭제된다.
• 영구 쿠키
  • 영구 쿠키는 Expires 또는 Max-Age 속성을 지정해서 특정 날짜 또는 일정 기간이 지나면 삭제되게 만든 쿠키이다. 브라우저를 닫는다고 만료되지 않는다.
• 사용법

  Set-Cookie: <cookie-name>=<cookie-value>
  Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
  Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
  Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
  Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
  Set-Cookie: <cookie-name>=<cookie-value>; Secure
  Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
  Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict

• secure
  • 쿠키에 secure를 쿠가하면 https로만 쿠키를 주고받을 수 있게 된다.
  • 하지만 크롬, 파폭 특정 버전 이상에서는 테스트의 편의성을 위해 localhost에서는 이를 무시한다.
• httponly
  • 공격자가 쿠키를 자바스크립트로 빼낼 수 없게 만든다. (document.cookie로 접근 불가)
• samesite
  • 요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용하는 옵션.

로컬스토리지, 세션스토리지, 쿠키의 공통점과 차이점

공통점

1. 브라우저에 캐싱을 함으로써 서버에 대한 요청을 줄여 서버부하를 방지할 수 있다.
2. 캐싱으로 인해 다운로드 하는 컨텐츠가 줄어들어 웹사이트의 컨텐츠를 더 빨리 다운로드 할 수 있게 된다.
3. 사이트 테마 커스터마이징 등을 저장하거나 로그인 상태를 유지할 때 사용될 수 있다.차이점

• 쿠키와 로컬스토리지는 오리진이 같은 여러 개의 창이나 탭을 닫아도 유지된다.

 

 

 

출처

CS 지식의 정석 | 디자인패턴 네트워크 운영체제 데이터베이스 자료구조 - 큰돌

https://www.inflearn.com/course/%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-cs-%ED%8A%B9%EA%B0%95/dashboard