HTML5는 HTTP 세션 쿠키와 유사한 두 가지 저장 메커니즘을 도입하여, 클라이언트 측에 구조화된 데이터를 저장할 수 있게 했습니다. 이는 기존 쿠키가 가진 다음과 같은 단점을 보완하기 위한 것입니다.
- 쿠키는 모든 HTTP 요청마다 함께 전송되므로, 동일한 데이터를 반복해서 주고받으면서 웹 애플리케이션의 속도를 저하시킵니다.
- 쿠키에는 약 4KB 정도의 데이터만 저장할 수 있어, 필요한 데이터를 담기에 충분하지 않습니다.
HTML5에서 제공하는 두 가지 저장 메커니즘은 세션 스토리지(Session Storage)와 로컬 스토리지(Local Storage)이며, 각각 서로 다른 상황에 맞게 활용됩니다.
세션 스토리지(Session Storage)
세션 스토리지는 사용자가 하나의 트랜잭션을 수행하는 시나리오를 위해 설계되었습니다. 동시에 여러 창에서 서로 다른 트랜잭션을 진행하더라도, 각 창은 독립적인 세션 데이터를 유지합니다.
다음 예제를 실행하면 세션 변수를 설정하고 해당 변수에 접근하는 방법을 확인할 수 있습니다.
예제
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( sessionStorage.hits ){
sessionStorage.hits = Number(sessionStorage.hits) +1;
} else{
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>페이지를 새로 고침하면 조회수가 증가합니다.</p>
<p>창을 닫았다가 다시 열어 결과를 확인해 보세요.</p>
</body>
</html>위 코드를 실행하고 페이지를 새로 고침하면 방문 횟수가 계속 증가하지만, 창을 닫고 다시 열면 카운터가 초기화되는 것을 확인할 수 있습니다. 이것이 세션 스토리지의 핵심 특징입니다.
로컬 스토리지(Local Storage)
로컬 스토리지는 여러 창에 걸쳐 공유되며, 현재 세션이 종료된 후에도 데이터가 유지되는 저장소를 위해 설계되었습니다. 특히 웹 애플리케이션은 성능상의 이유로 사용자가 작성한 문서 전체나 사용자의 메일함 같은 대용량(수 메가바이트) 사용자 데이터를 클라이언트 측에 저장해야 할 수 있습니다.
다음 코드를 실행하면 로컬 스토리지 변수를 설정하고, 페이지에 접속할 때마다 해당 변수에 접근할 수 있습니다. 창을 닫았다가 나중에 다시 열어도 데이터는 그대로 유지됩니다.
예제
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
} else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>페이지를 새로 고침하면 조회수가 증가합니다.</p>
<p>창을 닫았다가 다시 열어 결과를 확인해 보세요.</p>
</body>
</html>정리: 언제 무엇을 사용해야 할까?
- sessionStorage: 브라우저 탭(창)별로 독립적인 임시 데이터를 저장할 때 적합합니다. 창을 닫으면 데이터가 사라지므로 일회성 트랜잭션이나 폼 입력 임시 저장 등에 유용합니다.
- localStorage: 브라우저를 종료해도 유지되어야 하는 영구 데이터를 저장할 때 적합합니다. 사용자 설정, 테마, 자동 로그인 토큰 등 장기간 보관이 필요한 데이터에 활용됩니다.
두 저장소 모두 쿠키와 달리 매 요청마다 서버로 전송되지 않으므로 네트워크 부담이 없으며, 용량 제한도 쿠키보다 훨씬 넉넉합니다(일반적으로 도메인당 약 5MB). 클라이언트 측 데이터 저장이 필요하다면 용도에 맞게 sessionStorage와 localStorage를 선택해 사용하시기 바랍니다.