[html5] Web Storage 사용 ( Session Storage, Local Storage )

Web Storage란?

웹 스토리지란 클라이언트쪽에 데이터를 저장해 두기 위한 스토리지입니다.

Web Strorage VS Cookie

쿠키

4KB의 저장 용량, 크기가 작다.   같은 사이트내에서 둘 이상의 탭을 열었을 때, 둘 이상의 트랜젝션 추적에 어려움이 있다.  이 외에도 여러 보안문제가 있다.

 
웹 스토리지

사양에 따르면 크기 제한이 없다.  서버로 보내지 않는다.(원하면 명시적으로 보낼 수 있다.)  유효기간이 없다.  JavaScript 객체를 저장할 수 있다.(정확하게는 객체의 복사본이 저장된다.)  웹 스토리지에는 Session Storage와 Local Storage가 있다.

키와 값

Web Storage는 간단하게 키와 값으로 데이터를 저장할 수 있습니다.
또한 해당하는 키를 통해 값을 꺼낼 수 있습니다.

지원 브라우저 및 최소 버전

API
Web Storage	4.0	8.0	3.5	4.0	11.5

웹 스토리지의 유효 범위

웹 스토리지의 유효범위는 Session Storage와 Local Storage에 약간 차이가 있습니다.
먼저 그림으로 살펴보고 아래의 내용을 읽어보면 쉽게 이해할 수 있습니다.

Session Storage
- 도메인마다 따로 생성된다.
- 윈도우(window 객체)와 같은 유효범위와 생존기간을 가진다. (같은 도메인이라도 윈도우마다 따로 생성된다.)
- 윈도우 복제로 생성된 경우, 스크립트를 이용해 새 창을 연 경우 같은 값을 가진 세션 스토리지가 "복제"된다.
- 새로 생성된 윈도우와 기존 윈도우의 세션 스토리지는 서로 영향을 주지 않는다.

Local Storage
- 도메인마다 따로 생성된다.
- 지속기간에 제한이 없다. 사용자가 명시적으로 지우지 않는 한 영구적으로 저장된다.
- 도메인이 다르면 서로의 로컬 스토리지에 접근할 수 없다. (hi.croute.me와 hello.croute.me는 다른 로컬 스토리지)
- 같은 도메인, 예를들면 croute.me에 소속된 웹페이지는 모두 같은 로컬 스토리지를 가진다.(접근한다.)
- Cookie를 이용한 사이트 고유 설정 정보등을 대신하기에 적당하다.

세션과 로컬의 차이점은 로컬은 지속성(보존)을 가지기 때문에 여러 창을 켜도 같은 도메인이라면, 같은 스토리지를 사용하는 것입니다.
세션 스토리지는 각 세션마다 새로운 스토리지를 사용하고 폐기합니다.

웹 스토리지 브라우저 지원 체크

웹 스토리지 사용 전 브라우저에서 지원 가능한지 여부를 체크하는 로직입니다.

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

    // Code for localStorage/sessionStorage.

} else {

    // Sorry! No Web Storage support..

}

웹 스토리지 메소드

스토리지의 메소드는 세션 스토리지와 로컬 스토리지의 메소드가 같습니다.

메소드	설명
length	스토리지에 저장된 데이터의 수를 반환
key(index)	지정된 인덱스의 키를 반환하고 키가 없다면 null 반환
getItem(key)	지정된 키에 대응하는 데이터를 반환
setItem(key, data)	지정된 키로 스토리지에 데이터를 저장
removeItem(key)	지정된 키에 대응하는 데이터를 삭제
clear()	모든 데이터를 스토리지에서 삭제

아래는 로컬 스토리지를 통해 알아본 저장/읽기/삭제에 대한 사용 예입니다.
메소드를 통하지 않은 키를 통한 직접적인 접근도 할 수 있습니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 저장 localStorage.croute = "good job"; localStorage["croute"] = "good job"; localStorage.setItem("croute", "good job");   // 읽기 var croute = localStorage.croute; var croute = localStorage["croute"]; var croute = localStorage.getItem["croute"];   // 삭제 delete localStorage.croute; delete localStorage["croute"]; localStorage.removeItem("croute");

아래는 for loop를 사용해서 storage에 저장된 모든 값을 가져오는 코드입니다.

?

1 2 3 4 5

for(var i = 0; i < localStorage.length; i++) {     var key = localStorage.key(i);     var value = localStorage[key]; }

참고)

식탁 위의 프로그래머 : [HTML5] Web Storage : 웹 스토리지

w3schools : http://www.w3schools.com/html/html5_webstorage.asp