세션 스토리지란? 로컬 스토리지와 차이부터 브라우저 임시 저장 방식까지 쉽게 이해하기

홈페이지에서는 신청서의 현재 단계, 탭 안의 임시 데이터, 잠깐 유지할 검색 조건, 작성 중인 화면 상태처럼 지금 이용하는 동안만 기억하면 되는 정보가 있습니다. 이럴 때 쓰는 기능이 세션 스토리지(Session Storage)입니다.

로컬 스토리지와 매우 비슷하지만, 가장 큰 차이는 데이터가 유지되는 기간입니다.

하루짜리 사물함에 비유하면

놀이공원에서 입장하는 동안만 가방을 맡기는 사물함과 비슷합니다. 이용하는 동안 넣고 뺄 수 있지만, 나가면 반납합니다. 현재 탭을 쓰는 동안에는 기억하고, 탭을 닫으면 일반적으로 사라집니다. 로컬 스토리지는 집에 있는 서랍처럼 브라우저를 닫아도 남을 수 있습니다.

어디에 저장될까?

서버 DB가 아니라 사용자 브라우저에 저장됩니다. 기기가 바뀌면 자동으로 따라가지 않습니다.

로컬 스토리지와의 가장 큰 차이

• 로컬 스토리지 — 브라우저를 닫아도 남아 있을 수 있음 (계속 쓰는 서랍)
• 세션 스토리지 — 보통 탭을 닫으면 사라짐 (지금만 빌리는 사물함)

새로고침·페이지 이동·탭 닫기

새로고침 = 세션 종료가 아닙니다. 같은 탭을 유지한 채 새로고침하면 step=2 같은 값이 남을 수 있습니다. 같은 사이트에서 /apply/step1 → step2 → step3처럼 이동해도 같은 탭이면 계속 쓸 수 있습니다.

탭을 닫으면 일반적으로 그 탭의 세션 스토리지는 제거됩니다. 브라우저 전체를 닫지 않아도 해당 탭만 닫으면 사라질 수 있습니다. 세션 복원 등 실제 동작은 브라우저마다 다를 수 있어, 「무조건 이 시점까지 보존된다」고 가정하면 안 됩니다.

새 탭에서는 데이터가 따로일 수 있다

세션 스토리지는 기본적으로 탭별로 분리될 수 있습니다. 탭 A에서 서울→부산, 탭 B에서 서울→제주 예약을 동시에 찾아도 서로 안 섞일 수 있습니다. 각 탭마다 자기만의 메모장을 가진 것과 비슷합니다. 새 탭에서 값이 다르다고 해서 항상 오류는 아닙니다.

어디에 쓰기 좋을까?

• 여러 단계 신청서의 현재 단계·임시 입력값
• 탭 안의 검색·필터·사이드바 열림 상태
• 같은 탭에서만 복원할 문의 작성 초안(탭을 닫으면 사라질 수 있음)

다음 방문까지 기억해야 하면 로컬 스토리지나 서버가 맞고, 탭을 닫은 뒤 사라져도 되면 세션 스토리지를 고려합니다.

서버로 자동 전송될까? 쿠키와의 차이

아닙니다. 쿠키는 조건에 따라 HTTP 요청에 실릴 수 있지만, 세션 스토리지는 요청마다 자동으로 서버에 가지 않습니다. JS가 읽어 쓰거나 필요할 때 보냅니다.

세션 쿠키 ≠ 세션 스토리지

이름이 비슷해 가장 헷갈립니다. 세션 쿠키는 쿠키의 한 종류(브라우저 세션 동안 유지되도록 설정한 쿠키)이고, 세션 스토리지는 Web Storage의 별도 임시 저장 공간입니다. 「세션 쿠키 = 유효기간이 짧은 쿠키」, 「세션 스토리지 = 별도 브라우저 임시 저장」으로 구분하세요.

보안 · 가격 · 권한

「세션」이라는 이름 때문에 보안용 금고로 생각하면 안 됩니다. JavaScript가 읽을 수 있고 XSS가 있으면 인증정보도 노출될 수 있습니다. 비밀번호를 그대로 저장하지 마세요. 탭을 닫으면 사라진다고 해서 사용 중 공격자가 못 읽는 것은 아닙니다.

사용자는 개발자 도구로 membership=vip, price=100, is_admin=true를 바꿀 수 있습니다. 최종 결제·권한은 서버가 다시 확인해야 합니다. HTTPS는 전송을 보호하지만, 저장된 값을 JS가 못 읽게 만들지는 않습니다. 인증 맥락은 401 글도 참고하세요.

Origin · www · 서브도메인

일반적으로 Origin(프로토콜·도메인·포트)으로 분리됩니다. HTTP/HTTPS, www 유무, shop.·account.는 서로 다른 공간일 수 있습니다. 대표 주소를 HTTPS 하나로 통일하는 것이 좋습니다.

쿠키 · 로컬 · 세션 · 캐시

• 쿠키 — 서버 자동 전달 가능 · 로그인·세션
• 로컬 스토리지 — 장기간 유지 가능 · 같은 Origin에서 탭 간 공유 가능 · 사용자 설정
• 세션 스토리지 — 보통 탭 세션 동안 · 탭별 분리 · 현재 작업 임시 데이터
• 캐시 — 이미지·CSS·JS 등 이미 받은 파일을 다시 쓰기 위한 창고(임시 메모지와 다름)

뒤로가기 시 입력값이 남는 것이 항상 세션 스토리지 때문은 아닙니다. 브라우저·다른 저장 방식일 수도 있습니다. 결제·주문·회원·예약·게시물처럼 중요한 결과는 브라우저에만 두지 마세요.

세션 스토리지 자체가 SEO를 올리거나 내리지는 않습니다. 다만 핵심 안내·상품·가이드가 「세션 값이 있어야만」 보이면 검색·공유에 불리할 수 있으니, 그런 콘텐츠는 세션 없이도 보이게 두는 편이 좋습니다.

자주 묻는 질문

새로고침하면 삭제되나요?

일반적으로 같은 탭에서 새로고침만으로는 삭제되지 않습니다.

탭을 닫으면 사라지나요?

일반적으로 해당 탭 세션이 끝나면 제거됩니다.

세션 쿠키와 같은가요?

아닙니다. 세션 쿠키는 쿠키의 한 종류이고, 세션 스토리지는 별도 Web Storage입니다.

다른 탭에서도 값이 보이나요?

기본적으로 탭별로 독립적인 공간을 가질 수 있습니다.

정리

로컬 스토리지 = 오래 쓰는 개인 서랍, 세션 스토리지 = 현재 이용하는 동안만 빌리는 임시 사물함으로 기억하면 됩니다. 여러 단계 신청·임시 검색·화면 상태처럼 지금 작업에만 필요한 정보에 맞고, 비밀번호·가격·관리자 권한을 믿고 처리하는 용도로는 쓰지 마세요.

쿠키·로컬·세션과 달리, 브라우저가 이미지나 CSS·JavaScript처럼 한 번 받은 파일을 저장해 다시 쓰는 기능도 있습니다. 바로 브라우저 캐시(Cache)입니다. 자세한 내용은 브라우저 캐시란?을 참고하세요.