Cookies vs Web Storage

Suyeon Lee·2024년 9월 14일

FE 면접 준비 browser storage

FE 면접 대비

목록 보기

2/2

브라우저 저장소란?

브라우저는 웹 어플리케이션이 사용자 정보를 클라이언트 측에서 저장하고 관리할 수 있는 다양한 매커니즘을 제공한다

사용자의 데이터를 저장하는 옵션들에는 LocalStorage, SessionStorage , cookie등이 있으며 고유한 특성과 용도를 갖고 있어 목적에 따라 사용하는 방법이 조금씩 다르다

이들을 통칭해 브라우저 저장소라고 부른다

브라우저 저장소는 클라이언트 측에서 데이터를 저장하는 방식이다

서버 측 저장소와 유사한 원리지만 데이터는 서버가 아닌 클라이언트, 즉 사용자의 브라우저에서 저장돼서 바로 불러올 수 있다

만약 내가 chrome에 데이터를 저장하면, firefox와 같은 다른 브라우저에서는 이 데이터를 확인할 수 없다

HTML5 도입 이전에는 주로 cookie를 사용했는데 크기가 매우 작아서 제한적이었다, 이후에는 최신 브라우저는 더 강력한 웹 스토리지를 제공한다

❓브라우저에 데이터를 저장하는 이유

클라이언트 측에서 데이터를 저장하면 데이터를 즉시 사용할 수 있다

서버에서 데이터를 받아 오는 방식은 서버 응답 시간이 걸릴 수 있기 때문에, 사용자 경험을 개선하기 위해 브라우저 저장소를 사용하는 경우가 많다

🔡 예시

이전 세션의 쇼핑 카트 내용

할 일 목록의 항목

사용자가 이전에 로그인했는지 여부

개인화된 UI 표시

Web Storage?

앞서 말했듯이 HTML5도입 이전에는 오직 쿠키를 사용하는 옵션 외에는 없었다

그런데 HTML5에서 웹 스토리지라는 개념이 도입되며 기존에 사용하던 쿠키랑 다르게, 브라우저 내에서 더 쉽게 관리하고, 더 큰 데이터를 저장할 수 있도록 만들어졌다

웹 스토리지 API를 사용하는 것은 쿠키를 사용하는 것보다 훨씬 강력하며 직관적으로 브라우저가 키/값 쌍을 저장할 수 있는 방식을 제공한다

보안 측면에서도 클라이언트 측에서만 데이터를 저장 및 관리하게 때문에 더 나은 선택지가 될 수 있다

이러한 웹 스토리지가 LocalStorage 와 SessionStorage 이다

Web Storage Method

setItem()

메서드를 사용해 로컬 저장소에 데이터를 설정
이 메서드는 두 개의 매개변수, 즉 키와 값을 사용

Storage.setItem(key, value);

getItem()

저장된 데이터에 접근하기
하나의 매개 변수, 즉 액세스해야 하는 값의 키만 사용

Storage.getItem(key);

removeItem()

메서드를 통해 저장된 데이터를 제거

Storage.removeItem(key);

removeItem()

Storage.claer(key);

HTML5가 도입되기 전에 사용할 수 있는 유일한 옵션이었으며 브라우저 저장소 중 가장 오래된 방식이다

서버와의 통신에서 자주 사용돼 왔고, 여전히 세션 관리나 추적 목적으로 많이 사용되고 있다

웹 스토리지랑 다르게 모든 HTTP 요청에 자동으로 포함돼서 서버로 전송된다

이 말은 사용자가 웹 사이트를 방문할 때마다 브라우저는 쿠키를 서버로 자동으로 전송한다는 말이다

특징

유효기간: 수동으로 설정할 수 있다

저장 용량: 일반적으로 한 도메인당 4KB

전송 방식: 모든 HTTP 요청마다 서버로 자동 전송

사용 예시

로그인 상태 유지

방문 기록을 추적한 맞춤형 광고

예를 들어, 사용자가 로그인 상태를 유지하려면, 서버는 쿠키에 로그인 상태 정보를 담아둔다

그러면 이후 사용자가 웹사이트를 재방문할 때마다 이 쿠키가 자동으로 서버로 전송되고, 서버는 사용자가 로그인된 상태라는 것을 인식하게 된다

그래서 우리가 개발자 도구를 통해서 쿠키를 확인하게 되면, 현재 쿠키에 어떤 정보가 있는지 확인할 수 있다

Local Storage

로컬 스토리지는 브라우저에 데이터를 영구적으로 저장할 수 있는 저장소이다

우리가 페이지 닫기 버튼을 눌러도 다시 열었을 때 데이터가 유지되기 때문에 장기적 데이터 저장에 적합하다

수동으로 삭제하지 않는 한 평생 로컬 스토리지에 저장된다

특징

유효기간: 데이터가 명시적으로 삭제되지 않는 한 영구

저장 용량: 약 10MB

전송 방식: HTTP 요청에 포함되지 않는다

보안: HTTPS를 통해 제공되면 안전

사용 예시

사용자의 테마 설정 저장 (Dark or Light)

쇼핑 카트 장바구니

Session Storage

로컬 스토리지와 거의 동일하지만 차이점이 있다면 세션이 종료되면 데이터가 삭제된다

즉, 브라우저의 탭을 닫거나 종료 시 세션 스토리지의 데이터도 사라진다

그렇기 때문에 같은 사이트라도 서로 다른 탭에서는 서로 다른 공간을 가진다

특징

유효기간: 세션이 종료될 때까지

저장 용량: 약 5MB

전송 방식: HTTP 요청에 포함되지 않음

보안: HTTPS로 안전하게 제공될 수 있음

사용 예시

다단계 폼 임시 저장

유저가 마지막으로 설정한 볼륨과 같은 설정

브라우저 저장소 비교하기

특징	Cookie	LocalStorage	SessionStorage
저장 용량	약 4KB	약 10MB	약 5MB
유효 기간	설정 가능(영구 또는 만료 시)	영구적	세션 종료 시 삭제
브라우저	HTML4/5	HTML5	HTML5
요청과 함께 전송	O	X	X
데이터 유지	서버와 브라우저	브라우저에만 저장	브라우저에서만 저장

정리

쿠키

쿠키는 오래된 기술이지만 여전히 서버에서 사용자의 상태를 식별하거나 필요한 소량의 데이터를 저장할 때 유용하다

하지만 데이터 용량이 작고, 매번 서버로 전송되어 성능에 영향을 줄 수 있다는 단점이 존재한다
웹 스토리지 (LocalStorage, SessionStorage)

웹 스토리지는 더 많은 데이터를 저장할 수 있고, 서버로 전송되지 않으므로 성능 면에서 유리하다

하지만 단점은 API가 동기식으로 작동한다는 점이다

이로 인해 큰 데이터를 다룰 때는 UI 렌더링이 느려질 수 있다

그럼에도 불구하고, API가 간단하고 웹 애플리케이션에 쉽게 적용할 수 있어 많이 사용된다