HTML5 LocalStorage 웹클라이언트에서 데이터 저장은 LocalStorage사용!

Web Storage 란?

지원 브라우저 :     

Web Storage는 일종의 클라이언트-사이드 데이터베이스이다. 이 데이터는 서버가 아닌 각 사용자의 브라우저에 보관된다. 일반 데이터베이스와의 두드러진 차이점은 우리에게 익숙한 key-value 형식으로 보관/갱신/호출 한다는 것이다. 이것은 Web Storage를 사용하기위해 별도의 쿼리 문법이나 복잡한 메커니즘을 이해하지 않아도 됨을 의미한다. 그렇기 때문에 우리는 한가지만 기억하면 된다. Web Storage는 Web Database와 마찬가지로 브라우저에서 제공하는 저장공간을 사용한다는 것이다. 만약에 사용자가 사파리에서 파이어폭스로 전환하는 경우 동일한 데이터를 가져올 수 없다는 것을 유념하자.

Web Storage는 localStorage와 sessionStorage로 구분된다. 이들의 차이점은 브라우저가 완전히 종료되고 난 후에도 데이터가 유지 되느냐 마느냐이다. 데이터의 용도에 따라서 적절한 방식을 선택하면 된다.

출처 : http://html5.firejune.com/doc.html#storage

-지원 브라우저가 IE도 포함이지만 몇몇 함수는 돌아가지 않는듯하다. 아래의 소스는 IE9에서 돌아가지 않았다. 참고하시길. (아래 이미지는  IE9에서의 실행)

세션과 쿠키는 인터넷 창을 닫으면 없어지니 소용이 없고, 결국 클라이언트 단에서 파일저장을 찾다가 javascript에서  ActiveXObject() 가 있지만 IE에서만 동작하니 당연히 쓸모가 없고, 생각끝에 html5에서 본기억이 있어서 찾아보니 web Storage와 DB가지 있더라..

그래서 간단하게 web storage 사용법만 간단히 기록한다. (예제는 html5.firejune.com/doc.html#storage 에서 변형 한것입니다.)

1. 먼저 localStorage 의 값은 해쉬맵형태로 들어갑니다. value와 key 값으로 들어가므로 유의하시기바랍니다.

localStorage는 총 4개의 함수로 구성됩니다. setItem(key, value), removeItem(key), getItem(key), clear() 입니다. 함수 이름만 보더라도 쉽게 알수 있을겁니다.

---

<script>

if (typeof(localStorage) == 'undefined' ) {

  alert('당신의 브라우저는 HTML5 localStorage를 지원하지 않습니다. 브라우저를 업그레이드하세요.');

} else {

  try {

 

  localStorage.setItem("1", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("2", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("3", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("4", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("5", "Hello World!"); // key-value 형식으로 저장

  localStorage.setItem("6", "Hello World!"); // key-value 형식으로 저장

  } catch (e) {

     if (e == QUOTA_EXCEEDED_ERR) {

       alert('할당량 초과!'); // 할당량 초과로 인하여 데이터를 저장할 수 없음

    }

  }

 

 for(var i = 1; i <= localStorage.length; i++){

document.write(localStorage.getItem(i)+"<br><br>"); // 저장된 값 호출

 }

}

</script>

---

6개의 데이터를 집어 넣었으며, for문으로 localStorage만큼 돌리면서 출력하는 예제입니다.

위의 소스를 실행해보면 아래와 같은 결과 화면이 나옵니다. (크롬에서 실행한 화면입니다.)

2. 이제 setItem()쪽을 빼고 다시한번 돌려보겠습니다.

---

  <script>

if (typeof(localStorage) == 'undefined' ) {

  alert('당신의 브라우저는 HTML5 localStorage를 지원하지 않습니다. 브라우저를 업그레이드하세요.');

} else {

  try {

 

  } catch (e) {

     if (e == QUOTA_EXCEEDED_ERR) {

       alert('할당량 초과!'); // 할당량 초과로 인하여 데이터를 저장할 수 없음

    }

  }

 

 for(var i = 1; i <= localStorage.length; i++){

document.write(localStorage.getItem(i)+"<br><br>"); // 저장된 값 호출

 }

}

</script>

---

위의 결과은 아래 화면처럼 나옵니다.

결과 화면이 같습니다! 데이터를 넣지 않았는데 말이죠. 브라우저를 껐다켜도 똑같습니다. PC에 저장이 되어 있기 때문입니다. 쓰기 편리하죠?

모든 결과 물을 지우고 싶다면    localStorage.clear();

해당 키값만 지우고 싶다면  removeItem(key);  를 사용하면 됩니다. 

어떤 키값이 들어갔는 지 보고 싶다면 크롬으로 실행후 해당 실행화면에서 오른쪽마우스->요소검사->Resources ->Local Storage를 클릭해보면 어떤 데이터가 들어있는지 확인할수 있습니다.

(순서가 맞지 않는 이유는 당연히 해쉬 값은 순서에 맞게 정렬하지 않습니다. 오직 키값만을 통해서 가져오기 때문에 정렬을 할필요가 없지요.)

local Storage를 간단하게 살펴 보았습니다. 클라이언트단에서 데이터를 저장할수 있다는 메리트가 너무나 크게 작용하지만 해쉬형태로 저장하기 때문에 key, value 라는 매핑이기 때문에 객체를 저장하기에는 마땅치 않습니다.(ex- 객체를 구성하는 요소가 3가지라면 name, age, address 라면 불필요한 키값들이 늘어나게 됩니다.)

이제 다음 포스팅은 web SQL database 에서 포스팅 하도록 하겠습니다.