sessionStorage란 무엇인가?
웹 브라우저에서 제공하는 localStorage와 sessionStorage 속성은 키(key)와 값(value) 쌍 형태로 데이터를 저장할 수 있게 해주는 웹 스토리지 기술입니다.
sessionStorage 객체는 하나의 세션 동안만 데이터를 유지한다는 점이 특징입니다. 즉, 사용자가 브라우저 탭을 닫으면 저장된 데이터는 자동으로 삭제됩니다. 사용 방식 자체는 localStorage와 거의 동일하지만, 데이터의 지속 시간에서 차이가 있습니다.
sessionStorage를 사용하기 전에는 먼저 브라우저가 웹 스토리지를 지원하는지 확인해야 하며, 이후 데이터를 저장(set)하고 필요할 때 다시 불러오는(get) 과정을 거치게 됩니다.
데이터를 저장하는 문법
sessionStorage에 데이터를 저장하려면 setItem() 메서드를 사용합니다.
sessionStorage.setItem();
예제 코드
아래 예제는 브라우저의 웹 스토리지 지원 여부를 먼저 확인한 후, sessionStorage에 데이터를 저장하고 다시 읽어와 화면에 출력하는 전체 과정을 보여줍니다.
<html>
<body>
<p id = "storage"></p>
<script>
if (typeof(Storage) !== "undefined") {
// sessionStorage에 데이터 저장
sessionStorage.setItem("product", "Tutorix");
// 저장된 데이터를 가져와 화면에 출력
document.getElementById("storage").innerHTML = sessionStorage.getItem("product");
}
else {
document.getElementById("storage").innerHTML = "죄송합니다. 웹 스토리지를 지원하지 않는 브라우저입니다...";
}
</script>
</body>
</html>실행 결과
Tutorix
코드 설명
typeof(Storage) !== "undefined" 조건문을 통해 현재 브라우저가 웹 스토리지를 지원하는지 검사합니다. 지원하는 경우 setItem("product", "Tutorix")로 'product'라는 키에 'Tutorix' 값을 저장하고, getItem("product")로 해당 값을 다시 가져와 화면에 표시합니다. 만약 브라우저가 웹 스토리지를 지원하지 않는다면 안내 문구가 출력됩니다.