Storage

Web Storage APIStorage 인터페이스는 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있습니다.

도메인의 세션 저장소를 수정해야 하면 Window.sessionStorage에, 로컬 저장소를 수정해야 하면 Window.localStorage에 접근하세요.

속성

Storage.length Read only
Storage 객체에 저장된 데이터 항목의 수를 반환합니다.

메서드

Storage.key()
주어진 숫자 n에 대하여 저장소의 n번째 항목 키를 반환합니다.
Storage.getItem()
주어진 키에 연결된 값을 반환합니다.
Storage.setItem()
키가 저장소에 존재하는 경우 값을 재설정합니다. 존재하지 않으면 키와 값을 저장소에 추가합니다.
Storage.removeItem()
주어진 키를 저장소에서 제거합니다.
Storage.clear()
저장소의 모든 키를 저장소에서 제거합니다.

예제

아래 코드에서는 localStorage에 접근해 Storage 객체를 접근합니다. 우선 !localStorage.getItem('bgcolor')를 사용해 데이터가 저장소에 존재하는지 알아냅니다. 데이터가 있으면 Storage.getItem()으로 회수한 후 setStyles()로 페이지 스타일을 바꿉니다. 데이터가 없으면 populateStorage() 함수를 호출하고, 그 안에서는 Storage.setItem()을 통해 데이터를 설정합니다. 그 후에는 동일하게 setStyles()를 사용합니다.

if(!localStorage.getItem('bgcolor')) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font').value);
  localStorage.setItem('image', document.getElementById('image').value);
}

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}

참고: 실제 작동 예제는 저희의 Web Storage Demo에서 볼 수 있습니다.

명세

Specification Status Comment
HTML Living Standard
The definition of 'Storage' in that specification.
Living Standard

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
StorageChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
clearChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
getItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
keyChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
lengthChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
removeItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0
setItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

같이 보기