sessionStorage

✅ sessionStorage란?

sessionStorage는 브라우저에서 제공하는 클라이언트 측 저장소(Web Storage) 중 하나입니다.
웹 페이지에서 데이터를 일시적으로, 탭(세션) 단위로 저장할 수 있게 해줍니다.

---

📌 주요 특징

항목	내용
저장 위치	사용자의 브라우저 (클라이언트) 에 저장
유효 범위	현재 브라우저 탭(또는 창) 에서만 접근 가능
유지 시간	탭(또는 창)을 닫을 때까지 유지됨 (새로고침은 유지)
데이터 형식	문자열(string)만 저장 가능 (객체는 JSON.stringify로 변환 필요)
저장 용량	일반적으로 약 5MB (브라우저마다 다를 수 있음)
보안	HTTP 요청에 포함되지 않으며, 서버에 자동 전송되지 않음

 

---

✅ 언제 사용하나요?

sessionStorage는 다음과 같은 임시 데이터 저장에 적합합니다:

• 탭 간 공유할 필요 없는 로그인/사용자 상태
• 페이지 간 이동 시 잠깐 필요한 플래그
• 비정상 접근 판단, 팝업 표시 여부
• 검색 조건, 필터 유지 등 일회성 데이터 저장

---

✅ 기본 사용법

javascript

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

// 조회 
let username = sessionStorage.getItem("username");
console.log(username); // "kim123" 

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

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

 

📌 모든 값은 문자열로 저장되므로, 객체를 저장할 땐 JSON.stringify(), 꺼낼 땐 JSON.parse()를 사용합니다.

javascript

 

// 객체 저장 
const user = { id: "kim123", name: "김철수" }; 
sessionStorage.setItem("user", JSON.stringify(user)); 

// 객체 꺼내기 
const storedUser = JSON.parse(sessionStorage.getItem("user")); 
console.log(storedUser.name); // 김철수