[개념 정리] 웹브라우저 캐시 - 로컬 스토리지, 세션 스토리지, 쿠키 비교 정리

캐시(cache)의 사전적 의미는 데이터나 값을 미리 복사해 놓은 임시 장소이다. 다시 혹은 자주 사용해야 하는 데이터를 임시로 저장해두어 요청 효율을 높이는 방식이라고 볼 수 있다.

 

웹브라우저의 임시 데이터 저장소 캐시에는 세 종류가 있다.

로컬 스토리지, 세션 스토리지, 쿠키 세 가지이다.

 

각각의 특징과 셋의 차이점에 대해 알아보자.

참고로, 이 내용은 기술 면접의 단골 질문에 반드시 포함되는 부분이니

꼭 외워두도록 하자.

 

로컬 스토리지(local storage)

로컬 스토리지는 웹 스토리지 객체로

브라우저 내에 {key: value} 형태로 오리진*에 종속되어 저장되는 데이터를 말한다.

오리진이 같다면 동일 브라우저 내에서 공유된다.

특징은 아래와 같다.

• 하나의 키에 하나의 값만 저장된다.
• 사용자가 브라우저에서 수동으로 삭제하지 않는 한, 데이터는 평생 로컬 저장소에 저장되며 만료 날짜가 없다.
• 사용자가 창 또는 탭을 닫거나 컴퓨터를 종료해도 만료되거나 삭제되지 않는다. 
• 최대 저장 용량: 5MB
• 주로 사용자의 행위를 기억할 때, 혹은 로그인을 유지하기 위해 사용된다.
• 로컬 스토리지의 데이터는 서버에 자동으로 전송되지 않는다. (쿠키는 자동으로 전송됨)

 

클라이언트가 JavaScript  언어로 local storage를 조작할 수 있다.

문법은 아래와 같다.

• 설정: localStorage.setItem(key, value);
• key에 해당하는 값 가져오기: localStorage.getItem(key);
• 제거: localStorage.removeItem(key);
• 전체 제거: localStorage.clear();

 

*오리진(Origin):

웹 브라우저의 주소는 아래와 같이 구성되는데, 이 중 protocol부터 port까지를 오리진이라고 한다.

URL
protocol	hostname	port	pathname	query string	has
https://	naver.com	:443	/path/page	?name="w"&age="12"...	#hash
Origin
	host

 

세션 스토리지(session storage)

세션 스토리지는 로컬 스토리지와 매우 유사하다.

웹 스토리지 객체로 브라우저 내에 {  key: value } 형태로,

오리진에 종속되어 저장된다.

로컬 스토리지와 마찬가지로 오리진이 같다면 동일 브라우저 내에서 공유된다.

• 하나의 키에 하나의 값만 저장된다.
• 최대 저장 용량: 5MB
• 사용자가 브라우저 탭을 닫으면 데이터가 만료된다.

세션 스토리지 사용 명령어는 아래와 같다.

• 설정: sessionStorage.setItem(key, value);
• 탐색: sessionStorage.getItem(key);
• 제거: sessionStorage.removeItem(key);
• 전체 제거: sessionStorage.clear();

 

일반적으로 세션 스토리지 보다는 로컬 스토리지를 더 많이 사용한다.

 

쿠키(cookie)

쿠키는 브라우저에 저장된 데이터 조각이다.

(쿠키 부스러기 같아서 cookie라는 이름이 붙었다고 한다.)

클라이언트에서 먼저 설정할 수도 있고,

서버에서 먼저 설정할 수도 있으나,

보통은 서버에서 먼저 설정하여 쿠키를 생성하는 것이 일반적이다.

 

서버에서 응답 헤더로 Set-Cookie를 사용하여 값을 설정해 쿠키를 보내면

이후 클라이언트의 요청 헤더에는 Cookie 영역에 데이터가 설정되어

자동으로 요청마다 서버에 전달되고, 브라우저에도 저장된다.

 

쿠키는 클라이언트와 서버 둘 다 조작이 가능하지만

보통 서버에서 만료 기한 등을 설정하고 컨트롤한다.

 

최대 저장 용량은 4KB로 로컬 스토리지와 세션 스토리지에 비해 훨씬 적다.

주로 로그인, 장바구니, 사용자 커스터마이징 설정 저장, 사용자 행동 분석, 개인 맞춤형 광고 등에

활용된다.

 

클라이언트가 JavaScript 명령어 document.cookie를 통해 쿠키를 설정할 수 있고,

요청을 보낼 때 header - Cookie 형식으로 값을 설정하여 보낼 수 있으나,

권장되지 않는다.

클라이언트가 쿠키를 제어하면,

쿠키에 담긴 민감한 정보들의 보안 문제가 생기므로

서버가 제어하도록 해야 한다.

 

세션 쿠키 VS 영구 쿠키

세션 쿠키는 Expires 또는 Max-Age 속성을 지정하지 않은 것을 말하며,

브라우저가 종료되면 쿠키도 사라진다.

 

영구 쿠키는 Expires 또는 Max-Age 속성을 지정하여

특정 날짜 또는 일정 기간이 지나면 삭제되게 만든 쿠키로,

브라우저를 닫아도 만료되지 않는다.

 

쿠키를 사용하는 JavaScript 문법은 아래와 같다.

name과 value를 설정하고, 옵션을 추가할 수 있다.

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

 

이 중 secure, httponly, samesite 세 가지 옵션에 대한 간단한 설명은 아래와 같다.

• secure: https로만 쿠키를 주고 받을 수 있게 하는 옵션이었으나, Chrome52 이상 및 Firefox52 이상을 포함한 일부 브라우저는 보안을 강화하고 안정하지 않은 http 사이트가 secure 지시문으로 쿠키를 설정하는 것을 금지하기 위해 이 사양을 현재는 무시한다.
• httponly: 공격자가 자바스크립트 명령어로 쿠키 데이터를 확인할 수 없게 한다. document.cookie로 데이터에 접근할 수 없다.
• samesite: 요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용한다.

 

쿠키의 시큐어 코딩

쿠키 - 세션으로 로그인을 처리한다면 아래의 시큐어 코딩을 해야 한다.

1. cookie에 세션ID를 담을 때 이 세션ID를 기반으로 클라이언트의 갱니 정보를 유추할 수 없게 해야 한다.
2. 자바스크립트로는 파악할 수 없게 http only 옵션을 걸어야 한다.
3. 일정 시간의 세션 타임 아웃을 걸어야 한다.

 

쿠키 허용 관련 알림창 

서비스 운용 시 쿠키를 사용한다면 쿠키 허용 관련 알림창을 만들어야 한다.

방문 기록을 추적할 때 쿠키가 사용되기 때문에, 사용자 데이터 간접 수집에 해당하며

이에 관한 KISA(한국 인터넷 진흥원, Korea Internet & Security Agency)의 지침을 준수해야 한다.

 

로컬 스토리지 VS 세션 스토리지 VS 쿠키

공통점

1. 브라우저에 캐싱하여 서버로의 요청을 줄이고, 서버 부하를 방지할 수 있다.
2. 캐싱 덕에 매번 다운로드 해야 하는 콘텐츠가 줄어 웹사이트의 전체 콘텐츠를 더 빨리 다운로드 할 수 있다.
3. 다크모드, 글꼴 등 사이트 기본 설정 커스터마이징 설정을 저장하거나, 로그인 상태를 유지할 때 사용된다.

 

차이점

	로컬 스토리지	세션 스토리지	쿠키
최대 저장 용량	5MB	5MB	4KB
허용 브라우저	HTML4, HTML5	HTML5	HTML5
접근 범위	창(window)	창(window)	탭
만료 기한	영구	탭 닫으면 소멸	수동 설정
설정 가능 주체	클라이언트	클라이언트	클라이언트, 서버
요청 시 서버에 자동 전송 여부	X	X	O

 

참고: inflearn 강의 'CS 지식의 정석 - 큰돌'