HTML5 Web Storage API

Ad


Web Storage API는 브라우저가 쿠키를 사용하는 것보다 훨씬 더 직관적인 방법으로 키-값 쌍을 안전하게 저장할 수 있는 메커니즘을 제공하는 합니다. 1

로컬 저장소는 쿠키보다 저장 용량이 크며, 저장된 데이터를 서버로 전송하지 않습니다.

Web Storage API의 Storage 인터페이스2는 특정 도메인에 대한 세션 저장소 또는 로컬 저장소에 대한 액세스를 제공하며 저장된 데이터 항목을 추가, 수정 또는 삭제할 수 있습니다.

동일 원본 Origin (도메인 및 프로토콜)에서는 데이터를 저장한 페이지가 달라도 동일한 로컬 저장소에 대해 I/O가 가능합니다.

Web Storage 인터페이스는 window 객체의 localStorage 와 SessionStorage 속성으로 구현되어 있습니다.

두 속성의 유일한 차이점은 localStorage에 저장된 데이터에는 만료 시간이 없지만, sessionStorage에 저장된 데이터는 브라우징 세션이 끝나면 (즉, 브라우저가 닫힐 때) 지워집니다.

Storage Interface2

로컬 저장소에 데이터를 키-값 형태로 저장합니다.

값은 문자열 형식만을 지원합니다.

명세 Specifications

Storage Interface 의 명세3는 아래와 같습니다.

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

브라우저 지원 확인 Check Browser support

if (typeof(Storage) !== "undefined") {
    // 현재 브라우저는 Web Storage API를 지원합니다.
} else {
    // 현재 브라우저는 Web Storage API를 지원하지 않습니다.
}

속성 Properties

Storage.length

로컬 저장소에 저장된 데이터의 수를 가져옵니다.

var storage = window.localStorage;

storage.setItem('key1', 'value1');
storage.setItem('key2', 'value2');
storage.setItem('key3', 'value3');

var countOfKeyValuePairs = storage.length; // 3

메서드 Methods

Storage.key(n)

n 번째 키를 반환합니다.

var storage = window.localStorage;

storage.setItem('key1', 'value1');
storage.setItem('key2', 'value2');
storage.setItem('key3', 'value3');

storage.key(0); // ==> key1
storage.key(1); // ==> key2
storage.key(2); // ==> key3

Storage.setItem(k, v)

로컬 저장소에 데이터를 키 k, 값 v 로 저장합니다.

새로운 키 k 로 데이터를 입력하면 로컬 저장소에 새로운 항목이 저장되고, 존재하는 키 k 를 입력하면 기존 항목의 값이 갱신됩니다.

var storage = window.localStorage;

storage.setItem('key1', 'value1'); // 새로운 항목이 추가됨
storage.setItem('key2', 'value2'); // 새로운 항목이 추가됨
storage.setItem('key1', 'value3'); // 기존 키 key1 항목의 값이 'value3' 으로 갱신됨

Storage.getItem(k)

로컬 저장소에서 키 k에 해당하는 항목의 값을 반환합니다.

var storage = window.localStorage;

storage.setItem('key1', 'value1');
storage.setItem('key2', 'value2');

var val1 = storage.getItem('key1'); // ==> 'value1'
var var2 = storage.getItem('key2'); // ==> 'value2'
var var3 = storage.getItem('key3'); // ==> undefined

Storage.removeItem(k)

로컬 저장소에서 키 k에 해당하는 항목을 제거합니다.

var storage = window.localStorage;
var countOfKeyValuePairs = 0;

storage.setItem('key1', 'value1');
storage.setItem('key2', 'value2');

countOfKeyValuePairs = storage.length; // 2

storage.removeItem('key1');

countOfKeyValuePairs = storage.length; // 1

Storage.clear()

로컬 저장소를 초기화합니다.

var storage = window.localStorage;
var countOfKeyValuePairs = 0;

storage.setItem('key1', 'value1');
storage.setItem('key2', 'value2');

countOfKeyValuePairs = storage.length; // 2

storage.clear();

countOfKeyValuePairs = storage.length; // 0

브라우저 호환성 Browser compatibility

웹 브라우저마다 로컬 저장소 localStorage, sessionStorage 저장 수준이 다릅니다. Web Storage Support Test4 사이트에서 현재 웹 브라우저의 저장 수준을 대략적으로 확인할 수 있습니다.

데스크톱 Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4

모바일 Mobile

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? 8 11 3.25

window.localStorage 6

만료시간이 없는 데이터를 키-값 형태로 저장합니다.

var storage = window.localStorage;
storage.setItem('key1', 'value1');
var val1 = storage.getItem('key1');

window.sessionStorage 7

브라우징 세션이 끝나면 초기화되는 데이터를 키-값 형태로 저장합니다.

var storage = window.sessionStorage;
storage.setItem('key1', 'value1');
var val1 = storage.getItem('key1');

Demo

간단한 예제 페이지를 아래 링크에서 확인하세요.

DEMO: Web Storage API

코드는 GitHub에서 확인하실 수 있습니다.

icon-github HTML5 Web Storage API


  1. MDN: Using the Web Storage API 
  2. MDN: storage 
  3. The Storage Interface 
  4. Web Storage Support Test 
  5. iOS 5.1부터 Safari Mobile 은 localStorage 데이터를 캐시 디렉터리에 저장합니다. 캐시 디렉터리는 일반적으로 공간이 부족한 경우 시스템에 의해 정리될 수도 있습니다. 
  6. MDN: window.localStorage 
  7. MDN: window.sessionStorage