Storage

웹 스토리지 API의 스토리지 인터페이스는 특정 도메인을 위한 세션스토리지 또는 로컬 스토리지에 접근할 수 있게 합니다. 예를 들면, 저장된 데이터 아이템들의 추가, 변경, 삭제가 가능한 방식과 같습니다.

만약 한 도메인을 위한 세션스토리지를 조작하고 싶다면, Window.sessionStorage 메서드를 사용하면 됩니다. 마찬가지로, 로컬스토리지의 경우에는 Window.localStorage를 사용합니다.

Properties

Storage.length Read only

Storage 오브젝트에 저장된 데이터 아이템들의 갯수를 반환합니다.

Methods

Storage.key()

특정 숫자 n에 대해서, 스토리지에 n번째 저장되어 있는 키의 이름을 반환합니다.

Storage.getItem()

키의 이름을 넘기면, 키 값이 반환됩니다.

Storage.setItem()

키 이름과 값을 지정하여 스토리지에 저장합니다. 만약 키가 이미 있다면, 키의 값을 업데이트합니다.

Storage.removeItem()

키 이름에 해당하는 아이템을 제거합니다.

Storage.clear()

스토리지의 모든 키를 제거합니다.

Examples

localStorage를 호출함으로써 Storage의 객체에 접근할 수 있습니다. !localStorage.getItem('bgcolor') 을 이용하여 로컬 스토리지가 해당 데이터를 포함하는지의 여부를 확인할 수 있습니다. 만약 포함하고 있다면, setStyle() 메서드를 이용하여 로컬스토리지에 저장된 아이템들의 값에 접근하고, 그 값으로 현재의 속성들의 값을 업데이트합니다. 만약 bgcolor 값이 존재하지 않는다면, populateStorage() 메서드를 이용하여 로컬스토리지에 새로운 아이템들과 그 값을 저장합니다.

Here we access a Storage object by calling localStorage. We first test whether the local storage contains data items using !localStorage.getItem('bgcolor'). If it does, we run a function called setStyles() that grabs the data items using localStorage.getItem() and uses those values to update page styles. If it doesn't, we run another function, populateStorage(), which uses localStorage.setItem() to set the item values, then runs 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);

  setStyles();
}

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);
}

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] Since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up at the behest of the OS, typically if space is short.

All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

See also

Using the Web Storage API