코드쓰는사람

HTML5에 추가된 스펙 중 localStorage와 sessionStorage라는 객체가 있습니다. 사용자의 로컬에 데이터를 저장해두고, 불러올 수 있는 기능으로 이전의 쿠키를 대체할 수 있습니다. localStorage는 저장한 데이터에 반영구적으로 접근할 수 있는 반면(브라우저를 종료후 재접속해도 가능), sessionStorage는 브라우저가 닫히기 전까지만 접근이 가능합니다. 유효기간을 별도로 정하지 않는다는 점을 제외하면 쿠키와 비슷하게 동작한다고 볼 수 있습니다.

API는 다음과 같습니다.

interface Storage {
    readonly attribute unsigned long length;
    getter DOMString key(in unsigned long index);
    getter any getItem(in DOMString key);
    setter creator void setItem(in DOMString key, in any data);
    deleter void removeItem(in DOMString key);
    void clear();
};

사용법도 아주 간단합니다.

if (!localStorage.myData) {
    localStorage.myData = 1;
}

이렇게 저장해두면 브라우저를 닫은 후 다시 이 페이지를 접속하더라도 myData 값은 유효합니다. 저장된 값은 동일 출처 정책(Same Origin Policy)에 따라 동일한 스키마(http://), 동일한 호스트(www.naver.com), 동일한 포트(:80)에서만 접근할 수 있습니다.

localStorage는 현재 상대적으로 많은 브라우저에서 지원하지만, sessionStorage는 그보다 작은 수의 브라우저에서 지원합니다. 또한, IE8에서는 브라우저가 이상 종료(=crash)후 복구될 때 sessionStorage에 저장한 값을 복원해주지 못합니다. 널리 사용되는 브라우저에서 localStorage를 지원하는 최소 버전은 다음과 같습니다.

• Internet Explorer 8 (with sessionStorage)
• Firefox 3.5 (단, Firefox 2버전부터 globalStorage[모질라 전용], sessionStorage 제공)
• Chrome 4.0
• Safari 4.0
• Opera 10.50 beta 1 (with sessionStorage)

이 명세는 HTML5 Web Storage 파트에 명시되어 있습니다.

[adsense]