브라우저 저장소 비교 (Local Storage · Session Storage · Cookie)
면접에서 “브라우저 저장소(local storage, session storage, cookie)의 차이점을 설명해 주세요.”라는 질문이 자주 나옵니다. 세 가지 저장소를 목적·용량·동작 방식으로 나눠 정리해 보겠습니다.
로컬 스토리지 (Local Storage)
- 목적 : 클라이언트 측에서 데이터를 영구적으로 저장하기 위해 사용됩니다. 저장된 데이터는 사용자가 웹 애플리케이션을 닫아도 유지됩니다.
- 용량 : 일반적으로 5MB~10MB의 데이터를 저장할 수 있습니다.
- 동작 방식 : 키-값 쌍의 데이터를 문자열 형태로 저장하며, JavaScript의
localStorage객체를 사용하여 접근합니다. 데이터는 동일한 도메인에서만 접근 가능합니다. - 사용 예시 : 사용자 설정, 로그인 정보 등을 유지하기 위해 사용할 수 있습니다.
세션 스토리지 (Session Storage)
- 목적 : 클라이언트 측에서 데이터를 임시로 저장하기 위해 사용됩니다. 저장된 데이터는 해당 세션이 유지되는 동안에만 유효합니다. 세션은 브라우저가 열려 있는 동안 유지되며, 브라우저를 종료하면 세션 데이터도 삭제됩니다.
- 용량 : 로컬 스토리지와 동일한 용량을 가집니다.
- 동작 방식 : 로컬 스토리지와 유사하게 동작하지만, 저장된 데이터는 다른 브라우저 탭이나 창에서는 접근할 수 없습니다.
- 사용 예시 : 장바구니, 작업 세션, 페이지 간의 데이터 공유 등에 사용될 수 있습니다.
쿠키 (Cookies)
- 목적 : 서버와 클라이언트 간에 데이터를 주고받기 위해 사용됩니다. 주로 사용자 인증, 세션 관리, 개인화된 경험 제공 등에 활용됩니다.
- 용량 : 일반적으로 4KB의 데이터를 저장할 수 있습니다.
- 동작 방식 : 클라이언트의 로컬에 작은 텍스트 파일로 저장됩니다. 서버에서 응답 헤더를 통해 클라이언트에게 쿠키를 전송하고, 클라이언트는 이후 요청에 쿠키를 함께 전송합니다. 만료 기간을 설정할 수 있으며, 지정된 만료일까지 유지됩니다.
- 사용 예시 : 로그인 정보, 사용자 선호 설정 등을 저장하고 전송할 때 사용됩니다.
주요 차이점
- 로컬 스토리지와 세션 스토리지는 데이터를 클라이언트 측에 영구적/임시로 저장하는 반면, 쿠키는 서버와 클라이언트 간의 통신을 위한 데이터 교환에 사용됩니다.
- 로컬 스토리지와 세션 스토리지는 용량이 크고 데이터를 직접 조작할 수 있지만, 쿠키는 용량이 제한되고 서버에서 생성되며 클라이언트 측에서 수정이 제한됩니다.
- 쿠키는 서버에 요청을 보낼 때마다 자동으로 서버로 전송되지만, 로컬 스토리지와 세션 스토리지는 명시적으로 JavaScript를 사용하여 데이터에 접근해야 합니다.
- 로컬 스토리지와 세션 스토리지는 동일한 도메인 내에서만 접근 가능하지만, 쿠키는 동일한 도메인 또는 서브도메인에서도 접근할 수 있습니다.
한 줄 요약
로컬 스토리지는 영구 저장, 세션 스토리지는 탭/세션 단위의 임시 저장, 쿠키는 매 요청마다 서버로 전송되는 소용량(4KB) 데이터입니다. 기능의 목적에 맞게 적절한 저장소를 선택해야 합니다.