HTML5는 HTTP 세션 쿠키와 유사한 두 가지 메커니즘을 도입하여 클라이언트 측에 구조화된 데이터를 저장하고 다음과 같은 단점을 극복했습니다.
- 쿠키는 모든 HTTP 요청에 포함되므로 동일한 데이터를 전송하여 웹 애플리케이션의 속도를 늦춥니다.
- 쿠키는 약 4KB의 데이터로 제한됩니다. 필요한 데이터를 저장하기에 충분하지 않습니다.
저장을 위한 두 가지 메커니즘은 세션 저장과 로컬 저장이며 서로 다른 상황을 처리하는 데 사용됩니다.
세션 저장소
세션 저장소는 사용자가 단일 트랜잭션을 수행하지만 동시에 다른 창에서 여러 트랜잭션을 수행할 수 있는 시나리오를 위해 설계되었습니다.
다음을 실행하여 세션 변수를 설정하고 해당 변수에 액세스할 수 있습니다.
예시
<!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>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html> 로컬 저장소
로컬 저장소는 여러 창에 걸쳐 있고 현재 세션 이후에 지속되는 저장소를 위해 설계되었습니다. 특히, 웹 애플리케이션은 성능상의 이유로 전체 사용자 작성 문서 또는 사용자의 사서함과 같은 메가바이트의 사용자 데이터를 클라이언트 측에 저장하기를 원할 수 있습니다.
다음 코드를 실행하여 로컬 저장 변수를 설정하고 이 페이지에 액세스할 때마다 해당 변수에 액세스할 수 있습니다. 다음에 창을 열 때도 마찬가지입니다.
예시
<!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>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>