[기술면접] 브라우저 저장소 개념정리

💻  브라우저 저장소

브라우저 저장소는 웹 브라우저가 클라이언트(사용자의 컴퓨터)에서 데이터를 저장하고 관리할 수 있는 공간이다. 이를 통해 웹 애플리케이션은 서버와의 통신 없이 사용자 정보를 저장하거나, 페이지를 새로 고침해도 데이터가 유지될 수 있다. 대표적인 저장소 종류로는 Cookie, LocalStorage, SessionStorage, IndexedDB가 있다.

---

⁉️ Local Storage & Session Storage & Coockie & IndexedDB

- Local Storage

• 장기적인 데이터 저장과 사이트 전반의 설정 데이터 유지에 적합합니다. 그러나 모든 탭에서 데이터가 공유되며, 삭제 전까지 지속되어 보안 위험이 있을 수 있습니다.

- Session Storage

• 창이 닫힐 때 데이터가 삭제되므로, 한 세션 동안만 필요한 임시 데이터에 적합합니다.

- Cookie

• 서버와의 자동 데이터 전송 기능으로 세션 유지 및 사용자 추적에 유리하지만, 저장 용량 제한과 보안 위험(특히 JavaScript 접근) 때문에 민감한 정보 저장 시 주의가 필요합니다.

- IndexedDB

• 브라우저에서 클라이언트 측에 데이터를 저장할 때 사용하는 비관계형 데이터베이스로, cookie, localStorage, sessionStorage보다 더 많은 양의 데이터를 구조화하여 저장할 수 있습니다.

---

⁉️ 성능 비교

구분	cookie	localStorage	sessionStorage	indexedDB
유효성 기간	만료 기간 설정 가능 (기본적으로 세션 동안 유지)	영구 저장 (사용자가 삭제할 때까지)	세션 동안만 유지	영구 저장 (명시적 삭제 전까지 유지)
서버와의 자동 전송	HTTP 요청마다 서버로 자동 전송	서버로 전송되지 않음	서버로 전송되지 않음	서버로 전송되지 않음
저장 용량	각 쿠키 약 4KB 제한, 도메인당 개수 제한	보통 약 5MB	보통 약 5MB	수백 MB에서 몇 GB까지 가능
데이터 접근 방법	document.cookie	window.localStorage	window.sessionStorage	window.indexedDB
보안 옵션	HttpOnly, Secure 설정 가능	없음	없음	없음
데이터 구조	단순 문자열 데이터만 저장 가능	단순 문자열 데이터만 저장 가능	단순 문자열 데이터만 저장 가능	키-값 기반으로 객체 저장 가능, 인덱스 지원
데이터 공유	동일한 도메인 내에서 모든 창과 탭에서 공유	동일 도메인 내 모든 창에서 공유	개별 탭 또는 창에서만 유효	동일 도메인 내 모든 탭에서 공유
속도	상대적으로 느림	빠름	빠름	빠름 (대용량 데이터 처리 유리)

 

---

⁉️ 장단점

구분	cookie	localStorage	sessionStorage	indexedDB
장점	- 서버와 자동으로 데이터 전송 가능 - 만료 기간을 설정하여 데이터 유효성 제어 가능 - 보안 설정(HttpOnly, Secure) 으로 보호 가능	- 브라우저 종료 후에도 데이터 유지 가능 - 간편하게 키-값 저장 가능	- 세션마다 데이터를 독립적으로 관리 가능 - 창을 닫으면 데이터 자동 삭제	- 대용량 데이터 저장 가능 - 비동기 작업, 트랜잭션 지원 - 구조화된 데이터 검색  및 관리 가능
단점	- 저장 용량이 작음(4KB) - 매 요청마다 서버에 전송되어 성능에 영향 가능	- 사용자가 명시적으로 삭제하기 전까지 유지 - 민감한 정보 저장에 보안 위험 존재	- 브라우저 창이 닫히면 데이터 사라짐 - 같은 세션 외부에선 데이터 접근 불가	- 상대적으로 사용이 복잡하고 설정이 필요 - 데이터베이스 API 학습 필요

 

---

💡 참고 사이트

https://ko.javascript.info/data-storage

브라우저에 데이터 저장하기

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

Web Storage API - Web API | MDN