[WEB] 웹 브라우저의 캐시(쿠키, 로컬 스토리지, 세션 스토리지)

쿠키, 로컬 스토리지, 세션 스토리지는 웹 브라우저의 작은 저장소 역할을 한다.

이러한 것들을 통해 보통 사용자의 커스텀한 정보나 인증 모듈 관련 사항들을 웹 브라우저에 저장해서 추후 서버에 요청할 때 자신을 나타내는 아이덴티티나 중복 요청 방지를 위해 쓰인다. 

 

쿠키

쿠키는 브라우저에 데이터를 저장하기 위한 수단 중 하나이며, 만료기한이 있는 키-값 저장소이다.

브라우저에서 서버로 요청을 전송할 때, 그 요청에 대한 응답에 Set-Cookie 헤더가 포함되어 있는 경우, 브라우저는 Set-Cookie에 있는 데이터를 저장하고 이 저장된 데이터를 "쿠키"라 한다. 

Set-Cookie : normal=yes

위처럼 서버의 응답에 Set-Cookie 헤더가 포함된 경우, normal이라는 이름에 yes가 저장된다.

이렇게 저장된 쿠키는 다시 그 브라우저에서 서버로 요청을 보낼 때, Cookie라는 헤더에 같이 전송된다.

서버에서는 이 헤더를 읽어서 유저를 식별하는 등의 구현이 가능하다.

Cookie : normal=yes

쿠키는 이렇게 동작하기 때문에 주로 서버에서 사용자를 식별하기 위한 수단으로 사용되어 왔다.

예를 들어, Set-Cookie 헤더로 세션 ID를 넣어둔 뒤에, 이 후 요청부터 전송될 Cookie 헤더의 세션 ID를 읽어 어떤 사용자가 보낸 요청인지 판단하는 식으로 동작한다.

수 많은 웹 사이트의 로그인 구현이 대부분 이와 같이 구성되어 있다.

 

쿠키는 4KB까지 데이터를 저장할 수 있고 만료기한을 정할 수 있다. 클라이언트 또는 서버에서 만료기한 등을 정할 수 있는데 보통 서버에서 만료기한을 정한다.

추가로, document.cookie를 이용해서 현재 쿠키 정보를 타인이 볼 수 없도록 httponly 옵션을 걸어줘야 한다.

 

 

로컬 스토리지

만료 기한이 없는 키-값 저장소이다. 웹 브라우저를 닫아도 유지되고, 도메인 단위로 저장, 생성된다.

그래서, 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에 저장한다.

로컬 스토리지는 window.localStorage에 위치한다. 

localStorage.setItem('name', 'zerocho');
localStorage.setItem('birth', 1994);
localStorage.getItem('name'); // zerocho
localStorage.getItem('birth'); // 1994 (문자열)
localStorage.removeItem('birth');
localStorage.getItem('birth'); // null (삭제됨)
localStorage.clear(); // 전체 삭제

메소드를 간단히 설명하자면, localStorage.setItem(키, 값)으로 로컬스토리지에 저장한 후, localStorage.getItem(키)로 조회하면 된다. localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워진다.

 

최대 10MB까지 저장할 수 있으며 HTML5부터 새로 생긴 저장소이기 때문에, HTML5를 지원하지 않는 웹 브라우저에선 사용할 수 없고, 클라이언트단에서만 수정이 가능하다. 

 

세션 스토리지

만료기한이 있는 키-값 저장소이다. 탭 단위로 세션 스토리지를 생성하며, 탭을 닫으면 해당 데이터가 삭제된다.

그래서, 잠깐 동안 필요한 정보(일회성 로그인 정보 등)는 세션 스토리지에 저장한다.

세션 스토리지는 window.sessionStorage에 위치한다. 

위 로컬 스토리지에서 사용하는 모든 메소드가 동일하게 적용되지만, 데이터가 영구적으로 저장되지 않는다.

 

최대 5MB까지 저장할 수 있으며 로컬 스토리지와 같이 HTML5부터 새로 생긴 저장소이기 때문에, HTML5를 지원하는 웹 브라우저에서만 사용할 수 있다. 또, 클라이언트에서만 수정이 가능하다.

 

참고 ) 데이터베이스의 캐싱 계층

참고로, 데이터베이스 시스템을 구축할 때도 메인 데이터베이스 위에 redis 데이터베이스 계층을 '캐싱 계층'으로 두고 성능을 향상시키기도 한다.

위 그림과 같이 캐시 히트가 발생하면 캐시 역할을 하는 redis 데이터베이스에서 바로 데이터를 가져오고, 캐시 미스가 발생하면 메인 데이터베이스로 가서 데이터를 가져온 후에 가져온 데이터를 redis 데이터베이스에 저장한다.