h43. HTML5 내부 저장 기능

HTML5 내부 저장 기능

HTML 내부 저장 기능은, 웹 애플리케이션이 사용자의 브라우저 내에 데이터를 내부적으로 저장할 수 있는 기능으로 쿠키보다 유용합니다.

HTML5 이전에는, 애플리케이션 데이터는 쿠키에 저장하여야 했습니다. 

내부 저장 기능은 쿠키 보다 보안이 더 좋습니다. 

또 웹 사이트 성능에는 영향을 주지 않으면서도 더 많은 데이터를 내부에 저장할 수 있습니다.

쿠키 와는 달리, 저장 한도가 최소 5MB 이상으로 훨씬 크고 또 정보가 서버로도 전송되지 않습니다.

내부 저장 기능은 "접속근원 (=도메인과 프로토콜)" 당 하나씩 생성할 수 있고, 하나의 근원을 갖는 모든 페이지 들은 동일한 데이터로 저장하고 접근할 수 있습니다.

크롬, 파이어 폭스, 사파리, 오페라 및 IE8 이상에서 완전하게 지원됩니다.

HTML 내부 저장 공간은 사용자의 데이터 저장용으로 두개의 객체를 제공합니다.

window.localStorage
 : 만료기한이 없이 데이터를 저장
window.sessionStorage
 : 브라우저의 탭이 닫히면 데이터가 사라지며, 한번의 세션에서만 데이터를 저장

---

내부 저장 공간을 사용하기 전에는 브라우저가 localStorage 와 sessionStorage 를 지원하는지 먼저 점검합니다.

if(typeof(Storage) !== "undefined") {
// 여기에 localStorage 및 sessionStorage 코드를 삽입합니다.
} else {
// 웹 저장 기능이 제공되지 않는 브라우저 입니다.
}

localStorage 객체는 만료기한이 없이 데이터를 저장합니다. 데이터는 브라우저가 닫히기 전까지는 지워지지 않고 언제까지고 사용이 가능합니다.

// 저장할 때
localStorage.setItem("영화제목", "얼음왕국");
또는
localStorage.영화제목 = "얼음왕국";
// 검색할 때
document.getElementById("결과를 표시할 태그의 아이디").innerHTML = localStorage.getItem("영화제목");
또는
document.getElementById("결과를 표시할 태그의 아이디").innerHTML = localStorage.영화제목;
// 지울 때
localStorage.removeItem("영화제목");

localStorage 객체는 이름과 값의 쌍으로 이름에는 "영화제목" 을 값에는 "얼음왕국" 을 저장하였습니다.

이제 "영화제목" 으로 검색하면 그에 해당하는 값을 id 가 "결과를 표시할 태그의 아이디" 인 태그에 표시해 줍니다.

"영화제목" 을 localStorage 항목에서 지우려면 removeItem("이름") 으로 지울 수 있습니다.

---

이름과 값의 쌍은 항상 문자열로 저장됩니다. 그래서 필요하면 다른 자료형으로 변환하여 사용해야 합니다.

사용자가 버튼을 클릭 할 때 마다 숫자가 하나씩 증가한다고 합시다. 이때는 값 문자열을 숫자 자료형으로 변환해야만 덧셈 연산이 가능할 것입니다.

반면에 sessionStorage 는 localStorage 객체와 모두 같지만, 다만 데이터 보관 기한이 하나의 세션에서만 유지된다는 점이 다릅니다. 

데이터는 해당 브라우저 탭이 닫히면 지워집니다.

---

<script>
function clickCounter1() {
 if(typeof(Storage) !== "정의되어 있지 않음") {
 if (localStorage.clickcount) {
 localStorage.clickcount = Number(localStorage.clickcount)+1;
 } else {
 localStorage.clickcount = 1;
 }
 document.getElementById("a").innerHTML = "고객님^^ 물건을 무려 " + localStorage.clickcount + " 개나 구매하시겠다고요? 고맙습니다.";
 } else {
 document.getElementById("a").innerHTML = "브라우저가 웹 저장 기능을 지원하지 않습니다.";
 }
}
function clickCounter2() {
 if(typeof(Storage) !== "정의되어 있지 않음") {
 if (sessionStorage.clickcount) {
 sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
 } else {
 sessionStorage.clickcount = 1;
 }
 document.getElementById("b").innerHTML = "고객님^^ 물건을 무려 " + sessionStorage.clickcount + " 개나 구매하시겠다고요? 고맙습니다.";
 } else {
 document.getElementById("b").innerHTML = "브라우저가 웹 저장 기능을 지원하지 않습니다.";
 }
}
</script>
<button onclick="clickCounter1()" type="button">클릭하여 구매 추가 (안지워지는)</button>
<div id="a">탭을 닫았다가 다시 해보면 전혀 리셋 되지 않고 이어서 증가됩니다. 즉 브라우저 자체가 종료되기 전에는 언제까지고 지우지 않습니다.</div>

<button onclick="clickCounter2()" type="button">클릭하여 구매 추가 (리셋되는)</button>
<div id="b">현재의 브라우저의 탭을 닫았다가 다시 해보면 데이터가 리셋 된 것을 알수 있습니다.</div>

---

탭을 닫았다가 다시 해보면 전혀 리셋 되지 않고 이어서 증가됩니다. 즉 브라우저 자체가 종료되기 전에는 언제까지고 지우지 않습니다.

현재의 브라우저의 탭을 닫았다가 다시 해보면 데이터가 리셋 된 것을 알수 있습니다.

---

[광고] Udemy 동영상 강의로 보기