[JS] HTML5 WebStorage

1. 지원하는 브라우저의 종류

웹스토리지는 IE8+, 파이어폭스, 오페라, 크롬, 사파리를 지원합니다.

IE7과 그 이전버젼에서는 지원하지 않습니다.

2. 데이터 저장 객체

클라이언트에 데이터를 저장하기위한 두 종류의 객체가 있습니다.

• localStorage - 시간이 지나도 저장된 데이터가 지워지지 않습니다.

같은 브라우저내에 다른 윈도우창에서도 데이터가 공유됩니다.

• sessionStorage - 하나의 세션의 데이터가 저장됩니다. 

server session의 개념과 다릅니다. 해당 윈도우내에서만 데이터가 공유됩니다. 같은 브라우저내의 같은 도메인이라도 윈도우창이 다르면 데이터를 공유하지 않습니다.

3. 스토리지 지원 여부 체크

if ( typeof(Storage) !== "undefined" ) {

    //웹 스토리지 지원

} else {

    //웹 스토리지 미지원

}

4. 사용법

a-1. sessionStorage.setItem("one", "1");

a-2. sessionStorage.getItem("one");

b-1. sessionStorage.one = "first";

b-2. sessionStorage.one

c-1. sessionStorage[0] = "1000";

c-2. sessionStorage[0]

5. 브라우저별 스토리지 용량

웹 스토리지는 용량이 무한하지 않습니다. 또한 브라우저별로 제한 용량이 다를뿐 아니라 같은 브라우저라도 버젼별로 그 값이 상이합니다.

• iOS - 2.49MB / 2.49MB 
• Android 2.2+, 3.1+ - 2.49MB / Unlimited
• Android 3.0 - 2.49MB / 2.49MB
• IE 6, 7 - 지원하지 않음
• IE 8+ - 4.75MB / 4.75MB
• Chrome 4.0 - 지원하지 않음
• Chrome 6+ - 2.49MB / 2.49MB
• Firefox 3.5+ - 4.98MB / Unlimited / (globalStorage - 4.98MB)
• Safari 5+ - 2.49MB / Unlimited

6. 사용하는 용량체크하는 법 

JSON.stringify(sessionStorage).length