[HTML5] Web Storage

※ 출처 : "실전 HTML5 가이드" 한국웹표준커뮤티니

Web Storage는  일종의  클라이언트-사이드  데이터베이스이다.  이  데이터는  서버가  아닌  각  사용자의  브라우저에  보관된다.  

일반  데이터베이스와의 두드러진  차이점은  우리에게  익숙한 key-value 형식으로  보관/갱신/호출 한다는  것이다.  

이것은 Web Storage를  사용하기위해  별도의  쿼리  문법이나 복잡한 메커니즘을 이해하지 않아도 됨을 의미한다. 그렇기 때문에 우리는 한가지만 기억하면 된다. 

Web Storage는Web Database와 마찬가지로 브라우저에서 제공하는 저장공간을 사용한다는 것이다. 만약에 사용자가 사파리에서  파이어폭스로  전환하는  경우  동일한  데이터를  가져올  수  없다는것을 유념하자. 

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

 localStorage 예제

localStorage.setItem("name", "Hello World!");// key-value 형식으로 저장 document.write(localStorage.getItem("name"));// 저장된 값 호출 localStorage.removeItem("name");// 스토리지로 부터 일치하는 아이템 삭제

브라우저에서 localStorage를 지원하지 않는 경우를 구분 예제

if (typeof(localStorage) == 'undefined' ) {    alert('당신의 브라우저는HTML5 localStorage를 지원하지 않습니다. 브라우저를 업그레이드하세요.'); } else {            try {                   localStorage.setItem("name", "Hello World!");// key-value 형식으로 저장           } catch (e) {                   if (e ==QUOTA_EXCEEDED_ERR)                    {                           alert('할당량 초과!');// 할당량 초과로 인하여 데이터를 저장할 수 없음                   }           }           document.write(localStorage.getItem("name"));// 저장된 값 호출           localStorage.removeItem("name");// 스토리지로 부터 일치하는 아이템 삭제 }

브라우저에서 localStorage를 지원하지 않는 경우를 구분 예제2

// 브라우저의localStorage 지원여부를 판단 if (('localStorage' inwindow) &&window.localStorage !== null) {        // 개체에 프로퍼티를 할당하는 쉬운 방법을 사용        localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]'; }