[매일 HTML5 공부 15] Web Storage

 

 

개요

 

key/value 형태의 간단한 데이터를 저장하기 위한 클라이언트 측 저장공간을 말한다.

 

이전에는 일반적으로 쿠키를 사용했는데,

기존 쿠키와 비교했을때 문자뿐만아니라 자바스크립트 객체를 저장할수 있고, 저장공간도 크고~

쿠키처럼 매 요청마다 데이터를 서버에 전송하지 않아 불필요한 네트워크 트래픽을 발생시키지 않는다.

 

한마디로 쿠키보다 더 좋은 저장공간이 Web Storage 라는 거다.

 

	Web Storage	cookie
크기제한	5M byte	4K byte
서버간 데이터 전송 여부	전송안함	매번전송
만료기간	없음	있음
저장 가능 데이터	문자열, 객체	문자열

 

IE8 이상, Firefox, Opera, Chrome, Safari 에서 지원한다.

 

localStorage 와 sessionStorage

 

클라이언트에 데이터를 저장하기 위해 두가지 개체를 가지고 있다.

localStorage 와 sessionStorage 인데 둘은 데이터의 유효 범위와 저장 기간이 달라 용도가 다르게 쓰인다.

 

localStorage

• 웹 애플리케이션 마다 각각 생성되는 고유의 저장 공간.
• 동일한 애플리케이션내에서는 같은 스토리지를 사용한다.
• 임의로 삭제하지 않는 이상 영구적으로 저장이 가능하다.
• 기존의 Cookie로 대체하기 적합하다. 

 

sessionStorage

• 한번의 세션 동안만 유지되는 저장공간.
• 동일한 애플리케이션이라 하더라도 스토리지가 각각 따로 생성된다.
• 브라우저를 종료하면 각이 삭제되는 임시적 저장을 하는 공간이다.

 

localStorage와 sessionStorage 브라우저가 지원 상태 알아보기

if(typeof(Storage)!=="undefined")
  {
    ⁄⁄ Yes! localStorage and sessionStorage support!
    ⁄⁄ Some code.....
  }
else
  {
    ⁄⁄ Sorry! No web storage support..
  }

 

Web Storage 사용하기

 

데이터 저장

window.localStorage.key = "value";
window.localStorage.["key"] = "value";
window.localStorage.setItem ( key , value ) ;

 

데이터 읽기

window.localStorage.key;
window.localStorage.["key "];
window.localStorage.getItem (key);

 

데이터 삭제

delete window.localStorage.key;
delete window.localStorage.["key"];

window.localStorage.removeItem(key);

window.localStorage.clear(); ⁄⁄웹 스토리지의 모든 데이터 삭제

 

Storage 확인 하기

 

Chrome 브라우저에서 Ctrl+Shift+J 하면 Developer Tools 이 실행된다.

요기서 key와 value 값을 모두 확인해 볼수 있당