Blog

서론#

브라우저에는
로컬스토리지, 세션 스토리지, 쿠키라는 저장 수단이 있다.

이름만 보면
“다 비슷한 거 아닌가?”라는 생각이 들기 쉽다.
실제로도 단순한 값 저장 용도로는
큰 차이가 없어 보인다.

그런데 인증, 보안 이야기가 섞이기 시작하면
이 세 가지는 갑자기 전혀 다른 의미를 갖게 된다.

이 글은
각 저장소가 무엇을 잘하는지보다,
언제 선택이 갈리는지를 정리한 기록이다.

공통점부터 정리해보면#

세 가지 모두
브라우저에 데이터를 저장한다는 점에서는 같다.

• 페이지를 새로고침해도 값이 유지된다
• 자바스크립트로 접근할 수 있다
• 서버가 아니라 클라이언트 영역이다

그래서 단순한 상태 저장 관점에서는
차이가 잘 드러나지 않는다.

문제는
누가, 언제, 어떻게 접근할 수 있는가다.

로컬스토리지란?#

로컬스토리지는
도메인 기준으로 데이터를 영구 저장한다.

localStorage.setItem("theme", "dark");

• 브라우저를 닫아도 유지됨
• 명시적으로 지우지 않는 한 남아 있음
• 자바스크립트로 자유롭게 접근 가능

이 특성 때문에
설정값이나 UI 상태 저장에는 편리하다.

다만 중요한 점은
스크립트가 접근할 수 있다는 사실 자체가 위험 요소가 될 수 있다는 것이다.

세션 스토리지란?#

세션 스토리지는
로컬스토리지와 거의 동일한 API를 갖지만,
탭 단위로 생명주기가 제한된다.

sessionStorage.setItem("step", "2");

• 탭을 닫으면 데이터 삭제
• 같은 도메인이라도 탭이 다르면 공유되지 않음
• 역시 자바스크립트로 접근 가능

그래서
회원가입 단계, 임시 폼 데이터처럼
짧게 유지되어야 하는 상태에 적합하다.

보안 측면에서는
로컬스토리지보다 “조금 덜 남는다”는 차이만 있을 뿐,
근본적인 접근 방식은 같다.

쿠키란?#

쿠키는
브라우저 저장소 중 유일하게
서버와 자동으로 주고받는 저장소다.

Set-Cookie: sessionId=abc123; Path=/;

쿠키의 핵심은 “자바스크립트 저장소”가 아니라는 점이다.

• HTTP 요청마다 자동으로 포함됨
• 옵션에 따라 JS 접근 차단 가능
• 만료 시간, 전송 범위 제어 가능

이 특성 때문에
인증이나 세션 관리에서 자주 사용된다.

가장 중요한 차이점: 접근 주체#

세 저장소의 차이를
가장 단순하게 정리하면 이렇다.

여기서
보안 이슈의 방향이 갈린다.

• JS가 접근 가능하면 → XSS에 취약
• 요청에 자동 포함되면 → CSRF 고려 필요

그래서
“어디에 저장하느냐”는
단순한 편의성 문제가 아니다.

언제 무엇을 쓰는가#

정답처럼 외우기보다는,
피해야 할 선택부터 정리하는 편이 이해가 쉽다.

• 민감한 인증 정보
  • 로컬스토리지 X
• 탭 단위 임시 상태
  • 세션 스토리지 O
• 서버가 신뢰해야 하는 값
  • 쿠키 O

쿠키도 무조건 안전한 것은 아니고,
옵션 설정에 따라 성격이 완전히 달라진다.

정리#

로컬스토리지, 세션 스토리지, 쿠키는
기능보다 위험 모델이 다른 저장소다.

• 얼마나 오래 남는가
• 누가 접근할 수 있는가
• 요청에 어떻게 포함되는가

이 세 가지 질문에 답하면
선택 기준이 자연스럽게 정리된다.

그래서 저장소 선택은
편의성보다
책임의 위치를 정하는 문제에 가깝다.