[Web] 브라우저 저장소 LocalStorage와 SessionStorage

 

웹 개발을 하다 보면 클라이언트 측에 데이터를 저장해야 하는 순간이 있다.

로그인 상태 유지, 사용자 설정 저장, 장바구니 데이터 등 다양한 상황에서 브라우저 저장소를 활용하게 된다.
그 중에서도 가장 많이 쓰이는 두 가지가 바로 LocalStorage와 SessionStorage다.

둘 다 Web Storage API의 일부로 크키보다 훨씬 큰 용량을 제공하고 서버로 자동 전송되지 않는다는 공통점이 있다.

 

 

LocalStorage - 탭을 닫아도 살아있음

• LocalStorage에 저장된 데이터는 브라우저를 완전히 종료하고 다시 열어도 유지됨
• 사용자가 직접 삭제하거나 코드로 clear() / removeItem()을 호출하지 않는 한 영원히 남음
• 같은 출처 (origin : 프로토콜 + 도메인 + 포트) 라면 여러탭에서 동일한 데이터를 유지함

// 저장
localStorage.setItem('theme', 'dark');

// 읽기
const theme = localStorage.getItem('theme'); // 'dark'

// 삭제
localStorage.removeItem('theme');

// 전체 삭제
localStorage.clear();

• 적합한 사용 사례
  • 다크 모드 / 언어 설정 등 사용자 환경 설정
  • 자동 로그인을 위한 토큰 저장 (보안 주의)
  • 앱의 상태 캐싱 (API 응답 캐시 등)

 

SessionStorage - 탭을 닫으면 사라짐

• 브라우저 탭(세션) 단위로 격리됨
• 같은 사이트라도 탭이 다르면 서로 다른 저장 공간을 사용
• 탭을 닫는 순간 데이터 삭제됨
• 페이지를 새로고침하는 경우에는 데이터가 유지

// 저장
sessionStorage.setItem('step', '2');

// 읽기
const step = sessionStorage.getItem('step'); // '2'

// 삭제
sessionStorage.removeItem('step');

• 적합한 사용 사례
  • 멀티 스텝 회원가입 / 결제 폼의 중간 데이터
  • 탭 별로 독립적인 검색 필터 상태
  • 로그인없이 유지할 임시 장바구니

 

공통 주의사항

• 보안에 민감한 데이터는 저장하지 말 것
• 둘 다 XSS 공격에 노출될 수 있음, 비밀번호나 결제 정보 같은 민감한 데이터는 절대 저장 X
• 저장 가능한 타입은 문자열뿐 객체를 저장하려면 반드시 직렬화

// 객체 저장 시 JSON 직렬화 필수
localStorage.setItem('user', JSON.stringify({ name: 'Kim', age: 30 }));
const user = JSON.parse(localStorage.getItem('user'));

 

 

결론

• 유지돼야 한다 -> LocalStorage
• 탭 안에서만 잠깐 필요 -> SessionStorage

구분	LocalStorage	SessionStorage
데이터 유지 기간	명시적으로 삭제하기 전까지 영구 유지	브라우저 탭(세션)을 닫으면 삭제
공유 범위	동일 출처(origin)의 모든 탭·창 공유	탭(창)마다 독립적, 공유 안 됨
용량	약 5~10MB (브라우저마다 상이)	약 5MB
서버 전송	자동 전송 안 됨	자동 전송 안 됨
접근 가능 범위	같은 origin이면 어디서든 접근 가능	해당 탭 내에서만 접근 가능