HTML5 스토리지 (Storage)

HTML5가 아직 표준이 진행 중이지만..

2014년 02월 26일 기준 Editor's Draft...

(W3C, HTML5 Reference, http://dev.w3.org/html5/html-author/)

워낙 좋은 기능들이 많아서..

많이 사용되고 있죠 ~!?

기능 하나하나를 한꺼번에 다루기 힘드니.. 제가 자주 쓰는 내용 하나하나씩.. 

포스팅을 해볼까 합니다.

그 중 첫번째로 할 내용은 바로~!

HTML5를 사용해 클라이언트에 데이터를 저장하는 방식인

로컬 스토리지!(Local Storage)와 세션 스토리지!(Session Storage) 입니다.

저장 방식은 두개 모두 Key / Value 방식으로 저장하는 것으로 동일합니다.

가장 큰 차이점으로는 로컬 스토리지는 웹 브라우저가 종료되도 데이터를 가지고 있으며, 그렇다면

세션 스토리지는 그 반대가 되겠죠~!^^? 종료가 되면 데이터도 사라지게 됩니다.

사용 용도에 맞게 사용하면 될꺼 같네요 ^^

그럼 어떻게 사용하느냐~!?

사용법도 무지하게 간단합니다. 

객체를 저장할때

Local Storage	Session Storage
localStorage['key name'] = value;	sessionStorage['key name'] = value;
localStorage.setItem('key name',value);	sessionStorage.settem('key name',value);

     key name : 나중에 저장 된 값을 불러올 때 사용되는 고유 이름

     value : 저장 하려는 값.

     기존 아이템이 있을 경우에는 덮어쓰게 됩니다.

객체를 불러올때

Local Storage	Session Storage
var load_data = localStorage['key name'];	var load_data = sessionStorage['key name'];
var load_data = localStorage.getItem('key name',"");	var load_data = sessionStorage.gettem('key name',"");

     key name : 저장 된 값 키 이름 

     아이템이 없을 경우 null 이 반환되나, 두번째 getItem을 사용하여 두번째 인자값에 원하는 내용을 집어넣게 되면 그 내용이 출력됩니다.

특정 객체를 삭제할때

Local Storage	Session Storage
delete localStorage['key name'];	delete sessionStorage['key name'];
localStorage.removeItem('key name');	sessionStorage.removeItem('key name');

     key name : 저장 된 값 키 이름 

모든 객체를 삭제할때

Local Storage	Session Storage
localStorage.clear()	sessionStorage.clear();

참 사용하기 쉽죠 ^^?