브라우저의 스토리지 종류

브라우저 스토리지

브라우저 스토리지는 웹 브라우저가 사용자의 장치에 데이터를 저장하고 재사용할 수 있도록 하는 여러 기술을 포괄하는 용어이다

면접 질문에서도 자주 나오고 상태를 저장하기 위해 많이 사용하는 브라우저의 스토리지 중 가장 널리 사용되는 세 가지를 적어보려고 한다

쿠키(Cookies)

HTTP 쿠키는 웹사이트가 사용자의 브라우저에 저장하는 작은 데이터 조각이다.

쿠키는 사용자 세션을 유지하거나, 사용자의 선호 설정을 저장하거나, 추적 및 광고 목적으로 사용될 수 있지만, 약 4KB로 크기가 제한되어 있고, 모든 HTTP 요청에 전송되므로 대량의 데이터를 저장하기에는 적합하지 않다.

특징

1. 생성: 웹 서버는 HTTP 응답 헤더 Set-Cookie를 통해 쿠키를 생성하고 브라우저는 이후 요청에서 해당 쿠키를 Cookie 요청 헤더에 포함시킨다.
2. 한정된 용량: 쿠키는 보통 각 도메인당 20개, 총 4KB를 넘지 않아야 한다. 그렇기 때문에 쿠키에서는 용량이 큰 데이터를 저장하기에는 적합하지 않다.
3. 만료: 쿠키에는 유효 기간(Expiration)이나 최대 연령(Max-Age)이 설정될 수 있다. 이 기간이 만료되면 쿠키는 자동으로 삭제되고, 설정되지 않았다면, 브라우저가 닫힐 때 쿠키가 삭제된다.
4. 보안: 쿠키는 HTTP를 통해 전송되므로, 중간에서 가로채거나 변조될 수 있는 위험이 있다. 이런 위험에 대처할 수 있는 방안으로 Secure 플래그와 HttpOnly 플래그가 있는데, Secure 플래그는 쿠키가 HTTPS를 통해서만 전송되도록 하고, HttpOnly 플래그는 JavaScript를 통한 접근을 막아 Cross-Site Scripting (XSS) 공격을 예방할 수 있다.
5. Scope: 쿠키는 특정 도메인과 경로에 대해 설정될 수 있다. 도메인은 쿠키를 설정한 서버를 가리키며, 경로는 도메인 내의 특정 페이지를 가리키게 된다.

로컬 스토리지(LocalStorage)

사용자의 브라우저에 데이터를 영구적으로 저장하는 데 사용된다. 데이터는 사용자가 브라우저 캐시를 지워도 유지되지만, 데이터가 도메인별로 분리되어 있고, 웹사이트가 자신의 도메인에서 설정한 데이터에만 액세스 할 수 있다.

특징

1. 용량: 로컬 스토리지는 쿠키보다 훨씬 더 많은 데이터를 저장할 수 있다. 평균적으로 대부분의 브라우저에서 로컬 스토리지는 사용자 당 약 5MB의 데이터를 저장할 수 있게 해준다.
2. 서버와의 통신: 각 HTTP 요청마다 서버에 전송되는 쿠키와는 다르게 로컬 스토리지의 데이터는 서버에 전송되지 않는다.
3. 만료 기간: 만료 기간이 도래하거나 사용자가 브라우저를 닫으면 삭제되는 쿠키와는 반대로 로컬 스토리지 데이터는 만료 기간이 없고, 직접 삭제하지 않는 경우를 제외한다면 영구적으로 저장된다.
4. API: 로컬 스토리지는 setItem, getItem, removeItem, clear 등의 메서드를 가진 간단하고 직관적인 JavaScript API를 하여 메소드를 통해 쉽게 이용할 수 있다.

사용 예시

로컬 스토리지를 사용한다면 로그인 기록이나 사이트에서 제공하는 개인적인 설정값 등을 영구적으로 저장하여 사이트에 접속했을 때 자동로그인이 되거나 개인적인 설정값을 별도의 재설정 없이 불러올 수 있다

또한 오프라인 웹 애플리케이션에서 사용자의 상태를 저장하고 싶을 때 로컬스토리지를 이용한다면 이후 온라인 상태로 전환되더라도 저장되어 있는 스토리지 데이터는 사라지지 않아 별도의 작업이 필요하지 않고 바로 적용이 가능하다

그러나 보안적인 측면에서는 브라우저의 개발자 도구를 통해 누구나 로컬 스토리지의 내용을 볼 수 있기 때문에 여러 사용자가 함께 사용하는 브라우저일 때 보안이 중요한 데이터를 저장하는 것은 주의가 필요하다.

세션 스토리지(Session Storage)

세션 스토리지는 로컬 스토리지와 유사하지만, 브라우저 세션이 끝나면 (브라우저를 닫을 때) 데이터가 삭제되는 차이점이 있다. 이는 영구적인 저장은 필요하지 않지만 브라우저의 탭을 이용해 다른 사이트를 이용하고 이후 다시 사이트로 돌아왔을 때와 같이 특정 작업에 저장이 필요한 경우에 사용할 수 있다.

로컬 스토리지와의 차이점

1. 수명: 세션 스토리지의 항목은 브라우저가 닫히면 삭제된다. 반면 로컬 스토리지 항목은 만료 기간이 없다.
2. 유효 범위: 세션 스토리지 항목은 오직 웹 페이지 세션을 생성한 웹 페이지에서만 접근할 수 있다.
   • 로컬 스토리지의 경우 특정 탭에서 저장이 되었다면 다른 탭이나 모든 브라우저를 닫고 다시 접속을 해도 데이터가 저장이 되어있지만 세션 스토리지의 경우 현재 활성화되어있는 탭에서만 상태가 유지되기 때문에 다른 새로운 탭에서 접속하거나 크롬 탭을 별도의 새 창으로 열게 되는 경우에서는 데이터가 저장되어있지 않아 새로운 데이터를 가지고 있다.

사용 예시

가장 자주 접할 수 있는 환경은 온라인 쇼핑 사이트를 볼 수 있다

온라인 쇼핑몰에서 로그인을 하지 않고 비회원으로 쇼핑을 하게 된다면 장바구니에 담은 제품은 해당 탭이 열려 있는 동안에는 저장이 되어 다른 제품을 확인하거나 사이트 내 다른 기능을 이용할 때 저장이 되어있지만, 새로운 탭으로 다시 접속하거나 브라우저를 종료하고 다시 접속할 때는 비회원으로 담았던 아이템이 사라져 있는 경우를 예로 들 수 있다.

세션 스토리지도 로컬 스토리지와 같이 개발자도구에서 데이터를 직접 확인할 수 있기 때문에 데이터를 암호화하거나 다른 사람이 접근할 수 없도록 보안적인 데이터의 저장을 주의해야 한다.