DOM 웹 저장소 소개

웹 저장소 API에는 DOM(문서 개체 모델) sessionStoragelocalStorage를 사용하여 클라이언트 쪽 데이터를 안전하게 저장하기 위한 두 가지 관련 메커니즘이 포함되어 있습니다. 이러한 개체는 Windows Internet Explorer 8에 소개되었습니다.

참고  이전 버전의 Windows Internet Explorer에서는 userData 동작에 의해 영구적 데이터 저장소가 구현되었습니다.

웹 저장소란?

웹 저장소는 HTTP 쿠키에 비유되는 경우가 많습니다. 쿠키와 마찬가지로, 웹 개발자는 웹 저장소를 사용하여 세션별 데이터나 도메인 특정 데이터를 이름/값 쌍으로 클라이언트에 저장할 수 있습니다. 그러나 쿠키와 달리 웹 저장소를 사용하면 하나의 창을 통해 저장된 정보가 다른 창에 표시되는 방식을 보다 쉽게 제어할 수 있습니다.

예를 들어 사용자가 두 개의 브라우저 창을 열어 서로 다른 비행기 티켓 2장을 구입할 수 있습니다. 그러나 항공사의 웹 응용 프로그램이 쿠키를 사용하여 세션 상태를 저장하는 경우 정보가 한 트랜잭션에서 다른 트랜잭션으로 "누수"되어 사용자가 아무 알림 없이 동일한 비행기 티켓을 2장 구입하게 될 수 있습니다. 응용 프로그램이 나중에 서버로 돌아가기 위해 로컬에 값을 저장하는 등 오프라인 동작을 수행할 수 있게 됨에 따라 이러한 종류의 정보 "누수" 가능성이 점점 더 커지게 되었습니다.

또한 웹 저장소는 쿠키보다 더 많은 디스크 공간을 제공합니다. Internet Explorer에서 쿠키는 4KB의 데이터만 저장할 수 있습니다. 이 바이트 합계는 4KB의 이름/값 쌍 1개이거나 총 크기가 4KB인 최대 20개의 이름/값 쌍일 수 있습니다. 반면, 웹 저장소는 각 저장소 영역에 대해 대략 10MB를 제공합니다.

클라이언트 저장소 영역의 기능은 쿠키와 전혀 다릅니다. 웹 저장소는 쿠키처럼 요청할 때마다 값을 서버로 전송하지 않으며, 로컬 저장소 영역의 데이터가 만료되지도 않습니다. 쿠키와 달리, 브라우저 공급업체의 지원이 증가하고 있는 표준 인터페이스를 사용하여 개별 데이터를 쉽게 액세스할 수 있습니다.

웹 저장소 스크립팅 개체

window.sessionStorage

세션 저장소는 사용자가 단일 트랜잭션을 수행하는 시나리오에 맞게 설계되었습니다. window 개체의 sessionStorage 특성은 단일 탭이 지속되는 동안(최상위 검색 컨텍스트 기간 동안) 로드된 모든 페이지에 대해 키/값 쌍을 유지합니다. 예를 들어 페이지에 사용자가 보험을 원한다는 것을 나타내기 위해 선택하는 확인란이 있을 수 있습니다.


<label>
    <input type="checkbox" onchange="sessionStorage.insurance = checked">
    I want insurance on this trip.
</label>

이 경우 이후 페이지에서 스크립트를 통해 사용자가 확인란을 선택했는지 여부를 확인할 수 있습니다.


if (sessionStorage.insurance) { ... } 

Storage 개체는 expando 속성(이전 예제의 'insurance')을 지원합니다. 속성 이름이 없을 경우 속성 이름을 포함하기 위해 자동으로 키/값 쌍이 만들어집니다. 키/값 쌍은 항상 문자열로 저장됩니다. 숫자, 부울 값, 구조화된 데이터 등의 다른 데이터 형식은 저장소 영역에 저장되기 전에 문자열로 변환되어야 합니다.

값이 sessionStorage에 저장된 후 동일한 컨텍스트의 다른 페이지에서 실행되는 스크립트를 통해 값을 검색할 수 있습니다. 다른 문서가 로드되면 동일한 출처 URL에 대해 sessionStorage가 메모리에서 초기화됩니다. 자세한 내용은 보안 및 개인 정보 섹션을 참조하세요.

참고  HTML5에서는 허용되지만 Internet Explorer 8은 브라우저 크래시 복구 후에 sessionStorage를 다시 시작하지 않습니다.

window.localStorage

로컬 저장소 메커니즘은 여러 창에 적용되며 현재 세션이 끝나도 지속됩니다. localStorage 특성은 도메인에 대한 영구적 저장소 영역을 제공합니다. 이 특성을 통해 웹 응용 프로그램은 성능을 위해 전체 문서나 사용자 사서함 등의 사용자 데이터를 거의 10MB까지 클라이언트에 저장할 수 있습니다.

예를 들어 웹 사이트에서 다음 스크립트를 사용하여 사용자가 한 페이지를 방문한 횟수를 표시할 수 있습니다.


<p>
  You have viewed this page
  <span id="count">an untold number of</span>
  time(s).
</p>
<script>
  var storage = window.localStorage;
  if (!storage.pageLoadCount) storage.pageLoadCount = 0;
  storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
  document.getElementById('count').innerHTML = storage.pageLoadCount;
</script> 

참고  pageLoadCount를 증가시키기 전에 먼저 parseInt 메서드(JScript 5.6)를 사용하여 숫자로 변환해야 합니다.

각 도메인과 하위 도메인에는 별도의 로컬 저장소 영역이 있습니다. 도메인은 하위 도메인의 저장소 영역에 액세스할 수 있고, 하위 도메인은 상위 도메인의 저장소 영역에 액세스할 수 있습니다. 예를 들어 localStorage['example.com']example.com과 모든 하위 도메인에서 액세스할 수 있습니다. 하위 도메인 localStorage['www.example.com']example.com에서만 액세스할 수 있고 mail.example.com 등의 다른 하위 도메인에서 액세스할 수 없습니다.

저장소 개체

다음 속성과 메서드는 세션 및 로컬 저장소 개체 둘 다에서 지원됩니다.

항목콘텐트
clear

웹 저장소 영역에서 키/값 쌍을 모두 제거합니다.

constructor

개체 생성자에 대한 참조를 반환합니다.

getItem

웹 저장소 키와 연결된 현재 값을 검색합니다.

key

컬렉션의 지정된 인덱스에 있는 키를 검색합니다.

length

키/값 목록의 길이를 검색합니다.

remainingSpace

저장소 개체의 남은 메모리 공간(바이트)을 검색합니다.

removeItem

웹 저장소 컬렉션에서 키/값 쌍을 삭제합니다.

setItem

키/값 쌍을 설정합니다.

 

웹 저장소 이벤트

저장소 영역의 데이터가 업데이트되면 여러 브라우저 또는 탭 인스턴스 간에 정보가 동기화될 수 있도록 Internet Explorer에서 이벤트가 발생합니다.

다음 이벤트가 지원됩니다.

onstorage

저장소 영역이 변경되면 document에서 onstorage 이벤트가 발생합니다. 동일한 세션 컨텍스트를 공유하는 모든 문서와 로컬 저장소가 커밋되는 위치와 동일한 도메인 또는 하위 도메인의 페이지를 현재 표시 중인 문서에 이벤트가 수신됩니다.

대상 document 개체가 현재 활성화되어 있지 않으면 Internet Explorer에서 이벤트가 발생하지 않습니다.

onstoragecommit

Internet Explorer는 XML 파일을 사용하여 로컬 저장소를 저장합니다. 로컬 저장소를 디스크에 쓰면 onstoragecommit 이벤트가 발생합니다.

보안 및 개인 정보

로컬 저장소에 저장된 데이터는 도메인 내의 특정 경로로만 제한될 수 있는, 쿠키에 저장된 데이터보다 훨씬 더 공개됩니다. 추측하기 어려운 키를 선택해도 Storage 개체를 통해 키를 열거할 수 있으므로 개인 정보가 보호되지 않습니다.

다음과 같은 몇 가지 사항을 고려해야 합니다.

최상위 검색 컨텍스트 및 호스트 이름

세션 저장소 영역에 대한 액세스는 최상위 검색 컨텍스트에 의해 제한됩니다. Internet Explorer에서는 각 탭에 대해 새 검색 컨텍스트가 만들어집니다. 특정 최상위 검색 컨텍스트에서 실행 중인 스크립트는 다른 최상위 검색 컨텍스트에서 만들어진 저장소에 액세스할 수 없습니다. 사이트에서 세션 저장소에 데이터를 추가할 수 있으며, 세션 저장소는 동일한 창에 열린 해당 호스트 이름의 모든 페이지에서 액세스할 수 있습니다.

중요  포트 및 프로토콜/체계는 이 확인 과정에서 평가되지 않습니다.

출처에 따라 저장소 제한이 결정됨

값이 설정되는 도메인이 아니라 값을 설정하는 페이지의 도메인에 대해 디스크 할당량 제한이 적용됩니다. 이렇게 하면 악성 스크립트가 관련 도메인의 저장소 할당량을 모두 사용하는 경우를 방지할 수 있습니다. 또한 임의 하위 도메인에서 실행된 이러한 스크립트가 데이터를 무제한 저장하는 경우도 방지할 수 있습니다.

저장소 크기는 모든 키 이름과 값의 총 길이로 계산되며, 단일 저장소 영역에 최대 10MB가 포함될 수 있습니다. remainingSpace 속성은 사용 가능한 저장소 공간을 확인하는 데 사용됩니다.

저장소 영역 지우기

데이터를 참조하는 마지막 창을 닫는 즉시 세션 상태가 해제됩니다. 그러나 사용자는 Internet Explorer의 도구 메뉴에서 검색 기록 삭제를 선택하고 쿠키 확인란을 선택한 다음 확인을 클릭하여 언제든지 저장소 영역을 지울 수 있습니다. 이렇게 하면 즐겨찾기 폴더에 없는 모든 도메인에 대해 세션 및 로컬 저장소 영역이 지워지고 레지스트리의 저장소 할당량이 다시 설정됩니다. 소스에 관계없이 모든 저장소 영역을 삭제하려면 즐겨찾기 웹 사이트 데이터 보존 확인란 선택을 취소합니다.

저장소 목록에서 키/값 쌍을 삭제하려면 removeItem을 사용하여 컬렉션을 반복하거나 clear를 사용하여 모든 항목을 동시에 제거합니다. 로컬 저장소 영역의 변경 내용은 비동기로 디스크에 저장됩니다.

API 참조

Web Storage

샘플 및 자습서

웹 저장소를 사용하여 로컬에 파일 저장

Internet Explorer 테스트 드라이브 데모

오프라인 계산기

IEBlog 게시물

HTML5 AppCache 및 IndexedDB를 사용하여 오프라인 환경 빌드

사양

웹 저장소

관련 항목

JSON에 대한 간략한 개요
클라이언트 쪽의 웹 저장소 사용
HTML5 로컬 저장소를 사용하여 데이터 중심 지향 웹 응용 프로그램 작성

 

 

표시:
© 2014 Microsoft