[Frontend] sessionStorage

목차 (OPEN)

• 📦 sessionStorage
• 🧩 개념 정리
• 🏃🏻‍♂️ 동작 방식
• 🔐 보안적 측면
• 📑 요약 정리
• 📚 결론

 

 

 

📦 sessionStorage

sessionStorage는 웹 브라우저에서 제공하는 Web Storage API 중 하나로,
브라우저 세션 시간 동안에만 데이터를 저장할 수 있도록 해주는 클라이언트 측 저장소이다.

 

---

🧩 개념 정리

✔️ 정의

sessionStorage는 페이지를 새로고침해도 유지되지만,

탭을 닫거나 브라우저를 종료하면 자동으로 삭제되는 임시 저장소이다.

 

---

🏃🏻‍♂️ 동작 원리

1️⃣ 저장 구조

sessionStorage는 도메인 단위 + 탭 단위로 분리된다.

즉, 같은 도메인이라도 새 탭이나 새 창에서는 완전히 별개의 sessionStorage 공간이 만들어진다.

[Chrome 탭 A] -> sessionStorage A
[Chrome 탭 B] -> sessionStorage B
[Firefox 탭] -> sessionStorage C

 

2️⃣ 데이터 저장과 읽기

// 저장
sessionStorage.setItem("username", "soyeon");

// 조회
const user = sessionStorage.getItem("username");

// 삭제
sessionStorage.removeItem("username");

// 전체 비우기
sessionStorage.clear();

 

3️⃣ 수명 (lifecycle)

sessionStorage는 사용자가 웹페이지를 열고 있는 브라우저 탭이 살아있는 동안만 유지된다.

또한, 페이지를 새로고침하거나 라우팅 이동을 하더라도 데이터는 유지된다.

그러나 해당 탭을 닫거나 브라우저를 완전히 종료하면 자동으로 모든 데이터가 삭제된다.

 

4️⃣ 사용 목적

sessionStorage는 아래와 같은 용도에 적합하다.

• 민감하지는 않지만 짧은 시간 동안만 유지해야 할 상태 정보 저장
• 폼 입력값 임시 저장 (탭 닫기 전까지 복원)
• 특정 페이지 이동 간 임시 데이터 전달
• SPA (Single-Page Application)에서 비공개 정보 관리 (ex. 비회원 작성 중인 게시글 데이터)

 

---

🔐 보안적 측면

sessionStorage는 JavaScript에서만 접근 가능하며, 서버에는 자동 전송되지 않는다.

따라서 쿠키처럼 CSRF 위험은 없지만, XSS 공격에는 localStorage와 동일하게 취약하다.

 

---

📑 요약 정리

항목	sessionStorage
저장 위치	클라이언트 브라우저 (탭 별)
수명	브라우저 탭을 닫을 때까지
크기 제한	약 5MB (브라우저마다 상이)
접근	JavaScript로만 접근 가능
서버 자동 전송	❌ 안 됨
보안	XSS에 취약, CSRF엔 안전
사용 용도	임시 저장값, 세션 상태, 폼 입력값

---

📚  결론

• sessionStorage는 브라우저 세션(탭)이 유지되는 동안만 데이터를 저장할 수 있는 임시 저장소이다.
• 페이지를 새로고침 하더라도 데이터는 유지되지만, 탭을 닫거나 브라우저를 종료하면 저장된 데이터는 모두 사라진다.
• 하지만 sessionStorage는 JavaScript에서 자유롭게 접근 가능하기 때문에 보안상 민감한 정보를 저장해서는 안된다.
• 결론적으로 sessionStorage는 짧고 가벼운 임시 저장에 최적화된 도구이며, 보안이 필요한 인증 정보나 장기 상태 보관 용도로는 적합하지 않다.