웹 브라우저 로컬스토리지 관리 규칙과 세션스토리지 생명주기 대조

직접 해보기 →

모바일 앱이나 현대적인 웹 애플리케이션을 브라우저 환경에서 동작시킬 때, 로그인 세션 정보나 사용자의 다크모드 테마 설정 설정값을 기억하기 위해 서버 데이터베이스 대신 프론트엔드 단독 저장소인 웹 스토리지(Web Storage) API를 빈번하게 사용합니다.

대표적으로 사용되는 **로컬스토리지(LocalStorage)**와 **세션스토리지(SessionStorage)**는 사용법이 거의 일치하지만 데이터가 유지되는 생명주기(Lifecycle) 및 만료 시점에서 결정적인 설계 차이를 가집니다. 본 글에서는 두 스토리지의 비교 분석 공식과 안전한 데이터 핸들링 규칙을 해설합니다.

---

1. 로컬스토리지 vs 세션스토리지 생명주기 대조

두 스토리지는 브라우저의 동일출처 정책(Same-Origin Policy)에 묶여 있으며 Key-Value 형태의 단순 문자열 데이터를 저장하지만 만료 시점에 큰 차이가 있습니다.

[ \text{Storage State} = \text{SOP(Scheme, Host, Port)} \times \text{Lifespan} ]

• 로컬스토리지 (LocalStorage): 사용자가 명시적으로 웹 브라우저 캐시/데이터를 삭제하거나, 자바스크립트 코드 상에서 localStorage.clear()를 실행하기 전까지는 영구적으로 보존됩니다. 컴퓨터를 재부팅하거나 브라우저 창을 완전히 닫았다가 수일 후에 다시 열어도 데이터가 그대로 유지됩니다.
• 세션스토리지 (SessionStorage): 데이터가 '현재 탭 세션'이 살아있는 동안만 유효합니다. 브라우저 탭을 닫거나 브라우저 프로세스 창을 종료하는 순간 해당 세션스토리지 내 모든 데이터는 즉시 메모리에서 휘발되어 영구 소멸합니다. (단, 페이지를 단순히 F5 새로고침하거나 뒤로가기/앞으로가기 하는 동안에는 데이터가 소실되지 않고 유지됩니다.)

---

2. 브라우저 저장소 크기 한계 및 주의할 예외 상황

웹 스토리지 API는 동기식(Synchronous)으로 동작하므로 무분별하게 큰 용량을 읽고 쓰면 브라우저 메인 스레드가 멈추어(Blocking) 사용자 경험(UX)을 저해할 수 있습니다.

• 최대 가용 용량: 도메인(Origin)당 약 5MB ~ 10MB 내외로 제한됩니다. 용량을 초과하여 데이터를 쓰려고 시도하면 브라우저는 즉시 QuotaExceededError 예외를 발생시키며 쓰기를 거부합니다.
• 자바스크립트 스토리지 조작 코드 공식:

  // JSON 객체를 문자열로 직렬화하여 저장
  localStorage.setItem("user_theme", JSON.stringify({ mode: "dark", active: true }));
  
  // 데이터를 가져와 다시 파싱하여 객체 환원
  const theme = JSON.parse(localStorage.getItem("user_theme"));
  

[!NOTE] 개발자 도구를 열어 콘솔 창에서 불편하게 수동으로 조회할 필요 없이, 웹 스토리지 관리기 도구를 활용하면 로컬 및 세션 스토리지에 적재된 모든 키-값 상태를 즉시 한 테이블에서 실시간 모니터링하고 수정하거나 간편하게 개별 초기화할 수 있습니다.

---

3. 클라이언트 보안을 위한 웹 스토리지 설계 가이드

1. 민감 정보 저장 절대 금지: 로컬스토리지는 브라우저 개발자 도구나 크로스 사이트 스크립팅(XSS) 취약점 해킹을 통해 악의적인 제3자에게 누구나 쉽게 무단 탈취될 수 있습니다. 따라서 비밀번호, 금융 정보, 중요 서비스 JWT 토큰 등 보안이 직결된 기밀 정보는 절대 저장하지 말아야 합니다.
2. JSON.parse 에러 예방: 스토리지는 무조건 문자열 데이터만 수용하므로 가져올 때 try-catch 구문으로 감싸 파싱 에러를 예방해 주는 것이 무결성 확보의 필수 코딩 규칙입니다.