세션스토리지

세션스토리지란

세션 스토리지는 웹 브라우저의 Web Storage API 중 하나로, 특정 탭 또는 창에서만 유효한 데이터를 저장하는 클라이언트 측 저장소이다. 세션 스토리지는 페이지 세션이 종료될 때(즉, 탭이나 창을 닫을 때) 자동으로 삭제되며, 오리진(Origin)에 따라 데이터가 격리된다.

주요특징

• 세션 단위 데이터 저장: 세션 스토리지는 브라우저 탭이나 창에서만 유효하며, 해당 탭이나 창이 닫히면 데이터가 삭제된다.
• 오리진 기반 격리: 동일한 오리진 내에서만 세션 스토리지에 접근할 수 있다. 즉, 동일한 프로토콜, 호스트명, 포트 번호를 공유하는 페이지들만 이 데이터를 사용할 수 있다.
• 탭/창 별로 독립적: 각 브라우저 탭 또는 창은 자체적인 세션 스토리지 인스턴스를 가진다. 즉, 같은 사이트를 여러 탭에서 열더라도 각 탭의 세션 스토리지 데이터는 서로 공유되지 않는다.

세션 스토리지 사용법

세션 스토리지는 자바스크립트의 'window.seesionStorage' 객체를 통해 접근할 수 있다. 주로 다음과 같은 메서드를 사용한다.

데이터 저장

• sessionStorage.setItem(key, value)

sessionStorage.setItem('username', 'orange');

위 코드는 'username' 이라는 키에 'orange' 라는 값을 저장한다.

데이터 조회

• sessionStorage.getItem(key, value)

let username = sessionStorage.getItem('username'); 
console.log(username); // 'orange'

저장된 데이터를 조회할 때는 'getItem()' 메서드를 사용한다.

데이터 삭제

• sessionStorage.removeItem(key)

sessionStorage.removeItem('username');

특정 키에 저장된 데이터를 삭제할 수 있다.

모든 데이터 삭제

• sessionStorage.clear()

sessionStorage.clear();

세션 스토리지에 저장된 모든 데이터를 삭제한다.

세션 스토리지의 장단점

세션 스토리지의 장점

• 보안성: 세션이 종료되면 자동으로 데이터가 삭제되므로, 민감한 데이터를 임시로 저장하는 데 적합하다.
• 탭/창 별로 독립적: 각 브라우저 탭 또는 창은 독립적인 세션 스토리지를 가지므로, 특정 탭에서 발생한 데이터가 다른 탭에 영향을 미치지 않는다.
• 간단한 API: 자바스크립트에서 간단한 메서드로 데이터를 저장하고 조회할 수 있어 사용이 용이하다.

세션 스토리지의 단점

• 데이터 지속성 부족: 브라우저 탭이나 창을 닫으면 데이터가 사라지기 때문에, 장기적으로 데이터를 유지해야 하는 경우에는 적합하지 않다.
• 저장 용량 제한: 일반적으로 약 5MB 정도의 제한이 있어 대용량 데이터를 저장하기에는 한계가 있다.
• 보안 취약점: 세션 스토리지는 클라이언트 측에서 쉽게 접근할 수 있기 때문에, 민감한 정보(예: 비밀번호나 인증 토큰)는 저장하지 않는 것이 좋다.

세션/로컬 스토리지 비교

사용 사례

세션 스토리지는 다음과 같은 상황에서 유용하게 사용된다.

• 쇼핑몰 사이트에서 페이지 간 이동 시 장바구니 상태 유지
• 여러 단계로 나뉜 폼(form) 입력 과정에서 입력값 임시 저장
• 로그인 상태를 유지하지 않고도 특정 페이지에서 사용자 설정을 임시로 저장

따라서

세션 스토리지는 특정 브라우저 탭 또는 창에서만 유효한 데이터를 임시로 저장하는 데 매우 유용하다. 특히, 페이지 간 이동 시 일시적인 상태를 유지하거나 민감한 정보를 짧은 시간 동안 안전하게 관리하는 데 적합하다. 다만, 영구적으로 데이터를 유지해야 하는 경우에는 로컬스토리지나 쿠키와 같은 다른 클라이언트 측 저장소를 고려해야 한다.

블로그 내 관련 문서

• 로컬스토리지와 오리진

참고 자료

출처 :

• dev.to
• mdn
• cybrosys
• ramotion
• freecodecamp