웹 개발에서 데이터를 클라이언트 측에 저장하는 것은 사용자 경험을 향상시키고 애플리케이션의 효율성을 높이는 데 중요합니다.
브라우저의 Web Storage API는 localStorage와 sessionStorage를 통해 이러한 기능을 제공합니다. 이 문서에서는 두 스토리지의 공통점과 차이점, 주요 사용 사례, 실무에서의 활용, 그리고 주의사항에 대해 설명합니다.
1. 공통점
localStorage와 sessionStorage는 여러 면에서 유사한 특성을 가집니다.
- 브라우저에 데이터(Key-Value 쌍) 저장: 두 스토리지 모두 데이터를
key-value형태의 문자열 쌍으로 브라우저에 저장합니다. - 동일 출처(Same-Origin) 내에서만 접근 가능: 보안상의 이유로, 데이터를 저장한 웹 페이지와 동일한 도메인, 프로토콜, 포트를 가진 페이지에서만 해당 데이터에 접근할 수 있습니다.
- 쿠키와 달리 서버로 자동 전송되지 않음: HTTP 요청 시 쿠키와는 다르게 서버로 자동으로 전송되지 않으므로, 네트워크 트래픽에 불필요한 부담을 주지 않습니다.
- 문자열만 저장 가능: 모든 데이터는 문자열 형태로 저장됩니다. 객체나 배열과 같은 복잡한 데이터 타입을 저장하려면
JSON.stringify()를 사용하여 문자열로 변환해야 하며, 조회 시에는JSON.parse()를 사용하여 다시 객체로 변환해야 합니다.
2. 차이점
localStorage와 sessionStorage의 가장 중요한 차이점은 데이터의 보존 기간과 저장 범위에 있습니다.
| 구분 | 로컬 스토리지 (localStorage) | 세션 스토리지 (sessionStorage) |
|---|---|---|
| 데이터 보존 기간 | 브라우저를 꺼도 남아 있음 (영구 저장) | 브라우저 탭을 닫으면 삭제 |
| 저장 범위 | 같은 도메인 전체에서 공유 | 현재 탭에서만 유효 (새 탭이나 창에서는 공유 안 됨) |
| 주요 용도 | 장기간 유지해야 하는 데이터 (예: 자동 로그인, 사용자 설정) | 일시적인 상태 유지 (예: 입력 폼 데이터, 다단계 주문 진행 상황) |
| 용량 제한 | 대략 5MB 내외 (브라우저마다 다름) | 대략 5MB 내외 (브라우저마다 다름) |
3. 언제 무엇을 사용하나?
각 스토리지의 특성을 고려하여 적절한 상황에 맞게 사용해야 합니다.
로컬 스토리지 (localStorage) 주 사용 사례
localStorage는 데이터가 브라우저 세션이 종료되어도 유지되어야 할 때 유용합니다.
- 자동 로그인 토큰 저장: 사용자가 브라우저를 닫았다가 다시 열어도 로그인 상태를 유지해야 할 때 사용됩니다. (단, 보안상 위험이 있어 일반적으로는
HttpOnly쿠키 사용을 권장합니다.) - 사용자 설정값 유지: 다크 모드 여부, 언어 설정, 폰트 크기 등 사용자가 지정한 환경 설정을 브라우저를 닫아도 유지해야 할 때 사용합니다.
- 장바구니 데이터: 쇼핑몰에서 사용자가 담은 상품 목록이 브라우저를 껐다 켜도 유지되어야 할 때 활용됩니다.
- 즐겨찾기, 위시리스트, 최근 본 상품: 사용자의 개인화된 데이터를 장기간 보존해야 하는 경우에 적합합니다.
세션 스토리지 (sessionStorage) 주 사용 사례
sessionStorage는 현재 브라우저 탭 내에서만 유효한 임시 데이터를 저장할 때 적합합니다.
- 탭 단위 상태 관리: 특정 탭에서만 유지되어야 하는 임시 데이터나 상태를 관리할 때 사용합니다. 예를 들어, 한 탭에서 진행 중인 작업의 중간 상태를 저장할 수 있습니다.
- 폼 입력값 임시 저장: 사용자가 복잡한 폼을 작성하다가 실수로 페이지를 새로고침했을 때, 입력했던 값을 보존하여 다시 입력하는 수고를 덜어줍니다. (단, 탭을 닫으면 초기화됩니다.)
- 단기 테스트 데이터 저장: 사용자가 페이지 탐색 중에만 필요한 정보나 일회성 데이터를 저장할 때 유용합니다.
- 결제 진행 상태: 다단계 결제 과정에서 각 단계의 정보를 임시로 저장하여, 브라우저를 닫으면 초기화되어야 하는 민감한 단계 데이터를 관리할 때 사용될 수 있습니다.
4. 실무에서 주로 무엇을 쓰는가?
실제 개발 현장에서는 localStorage가 sessionStorage보다 더 많이 사용되는 경향이 있습니다.
localStorage가 더 많이 쓰이는 이유:localStorage는 영속성이 있어 사용자 편의 기능(다크 모드, 자동 로그인, 최근 본 상품 목록 등) 구현에 매우 적합하기 때문입니다. 사용자 경험을 지속적으로 유지하는 데 큰 장점이 있습니다.sessionStorage의 제한적인 사용:sessionStorage는 특정한 시나리오(탭 단위의 임시 저장, 일회성 데이터 관리)에서만 제한적으로 사용됩니다. 데이터의 생명 주기가 짧고 탭 간에 공유되지 않는 특성 때문에 범용적으로 사용되지는 않습니다.
5. 주의사항
localStorage와 sessionStorage를 사용할 때 가장 중요한 것은 보안입니다.
- 보안 민감 데이터 저장 금지: Access Token, 비밀번호, 개인 식별 정보와 같은 보안에 민감한 데이터는
localStorage나sessionStorage에 직접 저장하면 절대 안 됩니다. - XSS (Cross-Site Scripting) 공격에 취약: 클라이언트 측 스토리지에 저장된 데이터는 JavaScript를 통해 쉽게 접근하고 조작될 수 있습니다. 이는 XSS 공격에 노출될 위험이 크다는 것을 의미합니다.
- 권장 보안 방법: 보안에 민감한 데이터는 일반적으로
HttpOnly및Secure속성이 설정된 쿠키를 사용하는 것이 권장됩니다.HttpOnly쿠키는 JavaScript에서 접근할 수 없으므로 XSS 공격으로부터 안전하며,Secure속성은 HTTPS를 통해서만 전송되도록 하여 중간자 공격을 방지합니다.
결론:
localStorage와sessionStorage는 주로 편의 데이터나 민감하지 않은 정보 저장용으로 사용하는 것이 안전하고 올바른 활용 방법입니다.
정리
localStorage: 브라우저를 닫아도 오래 남아야 하는 데이터 저장(사용자 경험 최적화용)sessionStorage: 현재 세션(탭)에서만 필요한 임시 데이터 저장
donggyun_ee