Web Storage ( localStorage) 사용하기

javascript

WebStorage

LocalStorage 사용하기

 

Web Storage는 일종의 클라이언트-사이드 데이터베이스입니다. 

이 데이터는 서버가 아닌 각 사용자의 브라우저에 보관됩니다. 

 

각 사용자 PC (client)에서 각각 저장됩니다. 그리고 한 PC의 각 브라우저( 크롬,사파리,파이어폭스등.. )마다 각각 저장됩니다.

 

그러므로 Web Storage 는 각각의 사용자별 설정을 저장할 때 사용하면 유용합니다.

예를들어, 비회원의 장바구니, 로그인창의 아이디저장 설정, 즐겨찾기 메뉴등등..

 

Web Storage의 종류인 localStorage 에 대해 알아보겠습니다.

 

간단한 사용법

 - 값 저장

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

- 값 불러오기

var userName = localStorage.getItem("name");

- 값 삭제

localStorage.removeItem("name"); // 스토리지로 부터 일치하는 아이템 삭제

 

 

- 할당량 초과 예외 처리

try {

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

} catch (e) {

    if (e == QUOTA_EXCEEDED_ERR) {

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

    }

}

 

 

 

 

- 브라우저에서 localStorage를 지원하는지 체크.

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

 

또는

if (('localStorage' in window) && window.localStorage !== null)
    alert('localStorage 를 지원합니다');