PWA API - Storage

Storage

특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가, 수정, 삭제할 수 있는 API다.

 

• 도메인의 세션 저장소 접근하기: Window.sessionStorage
• 도메인의 로컬 저장소 접근하기: Window.localStorage

 

메소드

Storage.key()

주어진 숫자 n에 대하여 저장소의 n번째 항목 키 반환

 

Storage.getItem()

주어진 키에 연결된 값 반환

 

Storage.setItem()

키가 저장소에 존재하는 경우 값을 재설정하며, 존재하지 않으면 키와 값을 저장소에 추가

 

Storage.removeItem()

주어진 키를 저장소에서 제거

 

Storage.clear()

저장소의 모든 키를 저장소에서 제거

 

 

예시

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

 

 

MDN 문서

https://developer.mozilla.org/ko/docs/Web/API/Storage

Storage - Web API | MDN