현대 웹 애플리케이션은 사용자 데이터를 브라우저에 저장하는 기능을 자주 활용합니다.
로그인 상태 유지,
다크 모드 설정,
장바구니 정보 저장,
사용자 환경설정 보관 등 다양한 기능이 클라이언트 저장소를 기반으로 동작합니다.
과거에는 이러한 데이터를 저장하기 위해 주로 쿠키(Cookie)가 사용되었습니다.
하지만 쿠키는 서버 요청마다 자동으로 전송되기 때문에
불필요한 네트워크 트래픽이 발생하는 단점이 존재했습니다.
이를 보완하기 위해 HTML5에서는 Web Storage API가 등장했습니다.
Web Storage API는 LocalStorage와 SessionStorage라는 두 가지 저장소를 제공하며,
브라우저 내부에 데이터를 간편하게 저장할 수 있도록 지원합니다.
두 저장소는 사용 방법이 매우 비슷하지만
데이터 유지 기간과 동작 방식에서 중요한 차이가 존재합니다.
따라서 각각의 특징을 정확히 이해하고 상황에 맞게 사용하는 것이 중요합니다.
Web Storage API란 무엇인가
Web Storage API는 브라우저가 제공하는 클라이언트 저장소 기능입니다.
개발자는 JavaScript를 통해 데이터를 저장하고 조회할 수 있습니다.
데이터는 키(Key)와 값(Value) 형태로 관리됩니다.
문자열 기반 저장 방식을 사용하며
필요한 경우 JSON 형태로 변환하여 객체 데이터도 보관할 수 있습니다.
LocalStorage와 SessionStorage는 모두 Web Storage API에 포함됩니다.
두 저장소 모두 서버와 자동으로 데이터를 주고받지 않습니다.
따라서 쿠키보다 효율적인 클라이언트 데이터 관리가 가능합니다.
LocalStorage란 무엇인가
LocalStorage는 브라우저에 데이터를 영구적으로 저장하기 위한 공간입니다.
사용자가 브라우저를 종료하더라도 데이터가 삭제되지 않습니다.
컴퓨터를 재부팅하거나 브라우저를 다시 실행해도
저장된 데이터는 그대로 유지됩니다.
오직 사용자가 직접 삭제하거나
개발자가 JavaScript를 통해 제거할 때만 데이터가 사라집니다.
이러한 특성 덕분에 사용자 설정 저장에 자주 사용됩니다.
예를 들어 다크 모드 설정이나 자동 로그인 여부 같은 정보를 저장하기에 적합합니다.
장기간 유지되어야 하는 데이터를 다룰 때 LocalStorage가 유용합니다.
SessionStorage란 무엇인가
SessionStorage는 현재 브라우저 세션 동안만 유지되는 저장소입니다.
브라우저 탭이 열려 있는 동안에는 데이터가 유지됩니다.
하지만 탭을 닫거나 창을 종료하면 저장된 데이터는 자동으로 삭제됩니다.
다시 같은 사이트에 접속하더라도 이전 데이터는 복구되지 않습니다.
즉 SessionStorage는 임시 데이터 저장에 적합한 구조를 가지고 있습니다.
회원가입 진행 상태,
임시 폼 데이터,
현재 세션에서만 필요한 정보 저장에 자주 활용됩니다.
민감하지 않은 임시 상태 정보를 관리할 때 효과적으로 사용할 수 있습니다.
데이터 유지 기간의 차이
LocalStorage와 SessionStorage의 가장 큰 차이는 데이터 유지 기간입니다.
LocalStorage는 명시적으로 삭제하기 전까지 계속 유지됩니다.
브라우저를 종료하거나 컴퓨터를 재부팅해도 데이터는 남아 있습니다.
반면 SessionStorage는 브라우저 세션이 종료되는 순간 삭제됩니다.
사용자가 현재 탭을 닫으면 데이터도 함께 사라집니다.
따라서 데이터가 얼마나 오래 유지되어야 하는지에 따라 선택 기준이 달라집니다.
영구 저장이 필요하면 LocalStorage,
일시적인 저장이 필요하면 SessionStorage를 사용하는 것이 일반적입니다.
탭 간 데이터 공유 여부
두 저장소는 탭 간 데이터 공유 방식에서도 차이를 보입니다.
LocalStorage는 동일한 도메인이라면 여러 탭에서 데이터를 공유할 수 있습니다.
한 탭에서 저장한 데이터는 다른 탭에서도 접근 가능합니다.
반면 SessionStorage는 탭마다 독립적으로 관리됩니다.
같은 사이트를 여러 탭으로 열더라도
각 탭은 별도의 SessionStorage를 가지게 됩니다.
이 때문에 세션별 상태를 분리해야 하는 경우 SessionStorage가 유리합니다.
반대로 모든 탭에서 동일한 설정을 공유해야 한다면 LocalStorage가 적합합니다.
저장 용량 차이
LocalStorage와 SessionStorage는 모두 비교적 넉넉한 저장 공간을 제공합니다.
일반적으로 브라우저마다 약 5MB에서 10MB 정도의 저장 용량을 지원합니다.
이는 쿠키의 제한 용량보다 훨씬 큰 수준입니다.
따라서 사용자 설정이나 캐시 데이터 저장에 충분한 공간을 제공합니다.
다만 브라우저마다 정책이 조금씩 다를 수 있으며
대용량 파일 저장 용도로 사용하는 것은 적절하지 않습니다.
대규모 데이터 저장이 필요한 경우에는 IndexedDB 같은 별도 저장소를 사용하는 것이 좋습니다.
보안 측면에서 주의할 점
LocalStorage와 SessionStorage 모두 브라우저에서 쉽게 접근할 수 있습니다.
따라서 중요한 인증 정보나 민감한 개인정보를 저장하는 것은 권장되지 않습니다.
XSS 공격이 발생할 경우 저장된 데이터가 노출될 수 있기 때문입니다.
특히 JWT 토큰을 LocalStorage에 저장하는 방식은 보안 논쟁이 꾸준히 이어지고 있습니다.
실제 서비스에서는 HttpOnly Cookie와 같은 보안 기능을 함께 고려해야 합니다.
저장소 사용 시에는 데이터 편의성뿐만 아니라 보안성도 반드시 검토해야 합니다.
실무에서는 어떻게 사용할까
실무에서는 저장 데이터의 성격에 따라 선택이 달라집니다.
사용자 테마 설정,
언어 설정,
최근 검색 기록처럼 장기간 유지되어야 하는 정보는 LocalStorage를 사용하는 경우가 많습니다.
반면 회원가입 진행 단계,
일회성 입력 정보,
현재 페이지 상태와 같은 데이터는 SessionStorage가 적합합니다.
React나 Vue 같은 프레임워크에서도 두 저장소를 자주 활용합니다.
특히 상태 관리 라이브러리와 연동하여 사용자 경험을 개선하는 용도로 많이 사용됩니다.
결국 저장 기간과 데이터 특성을 기준으로 적절한 저장소를 선택하는 것이 중요합니다.
Summary
LocalStorage
• 브라우저 종료 후에도 데이터가 유지됨.
• 동일 도메인 내 여러 탭에서 데이터 공유 가능.
• 사용자 설정 저장에 적합함.
• 장기간 유지되는 데이터 관리에 활용됨.
SessionStorage
• 현재 브라우저 세션 동안만 데이터 유지.
• 탭을 닫으면 데이터가 자동 삭제됨.
• 탭마다 독립적으로 관리됨.
• 임시 상태 정보 저장에 적합함.