HTML Window의 sessionStorage 속성은 웹 브라우저에 키/값(key-value) 형태의 데이터를 저장할 수 있도록 해주는 기능입니다. 다만 sessionStorage에 저장된 데이터는 하나의 세션 동안만 유지되며, 브라우저 탭을 닫는 순간 자동으로 삭제됩니다. 이는 localStorage와 달리 데이터를 영구 보관하지 않는다는 점에서 큰 차이가 있습니다.
문법(Syntax)
sessionStorage 속성의 기본 사용 문법은 다음과 같습니다.
window.sessionStorage
주요 메서드
sessionStorage 객체에서 자주 사용되는 메서드는 다음과 같습니다.
- setItem(key, value) : 지정한 키에 값을 저장합니다.
- getItem(key) : 지정한 키에 해당하는 값을 가져옵니다.
- removeItem(key) : 지정한 키와 그에 해당하는 값을 삭제합니다.
- clear() : sessionStorage에 저장된 모든 데이터를 삭제합니다.
예제(Example)
다음은 HTML Window sessionStorage 속성을 활용해 이름을 저장하고 다시 불러오는 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 30%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show{
font-size:1.2rem;
}
</style>
<body>
<h1>HTML Window sessionStorage Property Demo</h1>
<button onclick="store()" class="btn">Store 'John Smith' Name to sessionStorage</button>
<button onclick="display()" class="btn">Display sessionStorage stored value</button>
<div class="show"></div>
<script>
function store(){
sessionStorage.setItem('firstName','John');
sessionStorage.setItem('lastName','Smith');
document.querySelector('.show').innerHTML='Name store successfully';
}
function display(){
var firstName=sessionStorage.getItem('firstName');
var lastName=sessionStorage.getItem('lastName');
document.querySelector('.show').innerHTML='Name stored in sessionStorage is: '+ firstName +' '+lastName;
}
</script>
</body>
</html>
실행 결과(Output)
먼저 "Store 'John Smith' Name to sessionStorage" 버튼을 클릭하면 이름이 sessionStorage에 저장됩니다.
이어서 "Display sessionStorage stored value" 버튼을 클릭하면 방금 저장된 값이 화면에 출력됩니다.
또한 개발자 도구(DevTools)의 Application 탭에서 Session Storage 항목을 직접 열어보면, 데이터가 키/값 형태로 어떻게 저장되는지 한눈에 확인할 수 있습니다.
