세션 스토리지

웹 브라우저 탭이나 창이 살아있는 동안에만 데이터를 저장하는 임시 저장소
데이터는 ‘키-값’ 쌍의 문자열 형태로 저장되며, 같은 사이트라도 다른 탭끼리는 데이터가 공유되지 않는다.
로그인 정보, 장바구니 등 ‘한 번의 방문’ 동안만 유지되면 되는 일시적인 데이터를 다룰 때 가장 유용
쿠키 가 가지고 있는 작은 용량, HTTP요청에 반드시 포함되어 전송, 보안 취약점 문제 해결 → 로컬 스토리지 세션 스토리지
‘세션’은 브라우저의 탭 또는 창 하나의 생명주기
- 생성: 페이지가 새로운 탭이나 창에서 열릴 때, 해당 탭을 위한 고유한 세션 스토리지가 생성
- 유지: 사용자가 그 탭 안에서 페이지를 새로고침하거나, 링크를 통해 다른 페이지로 이동해도 데이터는 그대로 유지
- 소멸: 사용자가 브라우저 탭이나 창을 닫으면 그 즉시 세션 스토리지에 저장된 모든 데이터는 영구적으로 삭제

메소드	설명	사용 예시
`setItem(key, value)`	키와 값을 받아 데이터를 저장합니다.	`sessionStorage.setItem('username', 'Alice');`
`getItem(key)`	키를 받아 해당 키에 저장된 값을 반환합니다. 값이 없으면 `null`을 반환합니다.	`let user = sessionStorage.getItem('username');`
`removeItem(key)`	키를 받아 해당 키의 데이터를 삭제합니다.	`sessionStorage.removeItem('username');`
`clear()`	해당 출처의 세션 스토리지에 저장된 모든 데이터를 삭제합니다.	`sessionStorage.clear();`
`key(index)`	정수 인덱스(0부터 시작)를 받아 해당 위치의 키 이름을 반환합니다.	`let firstKey = sessionStorage.key(0);`
`length`	저장된 데이터 항목의 개수를 반환하는 속성입니다.	`let count = sessionStorage.length;`

구분	세션 스토리지 (Session Storage)	로컬 스토리지 (Local Storage)	쿠키 (Cookies)
데이터 수명	브라우저 탭/창을 닫으면 삭제됨	사용자가 직접 삭제하지 않는 한 영구적으로 유지됨	설정된 만료일(expires)에 따라 삭제됨
데이터 범위	탭/창별로 독립적 (같은 출처라도 탭이 다르면 공유 안 됨)	출처(Origin) 단위로 공유 (같은 출처의 모든 탭/창에서 공유)	출처 단위로 공유 (같은 출처의 모든 탭/창에서 공유)
저장 용량	약 5MB	약 5MB	약 4KB
서버 전송	서버로 전송되지 않음	서버로 전송되지 않음	모든 HTTP 요청에 자동으로 포함되어 서버로 전송됨
주요 사용 사례	- 일회성 폼 데이터 임시 저장 - 한 세션 동안의 사용자 활동 기록 - 비로그인 사용자의 임시 장바구니	- 자동 로그인 정보 - 사용자의 UI 설정(테마 등) - 오프라인 웹 앱 데이터	- 사용자 인증 상태 관리(세션 ID) - 서버가 클라이언트를 식별해야 할 때

시스매