스토리지 메소드는 웹 브라우저의 스토리지에 데이터를 저장하고 검색하는 기능을 제공합니다. 여러가지 스토리지 메소드 중에서 가장 널리 사용되는 것은 localStorage와 sessionStorage입니다.

localStorage

localStorage는 데이터를 영구적으로 저장하는 데 사용됩니다. 이 데이터는 사용자의 로컬 브라우저에 저장되며, 브라우저를 종료하거나 재시작해도 데이터가 유지됩니다.

// 데이터 저장
localStorage.setItem('key', 'value');

// 데이터 조회
var value = localStorage.getItem('key');

sessionStorage

sessionStorage는 데이터를 현재 세션에만 저장하는 데 사용됩니다. 세션이 끝나면 데이터가 삭제됩니다.

// 데이터 저장
sessionStorage.setItem('key', 'value');

// 데이터 조회
var value = sessionStorage.getItem('key');

사용 예시

아래는 localStorage를 사용하여 사용자가 이전에 선택한 언어 설정을 유지하는 예제입니다.

// 이전에 선택한 언어 설정이 있는지 확인
var savedLang = localStorage.getItem('lang');
if (savedLang) {
  // 저장된 언어 설정을 적용
  applyLanguage(savedLang);
} else {
  // 기본 언어 설정을 적용
  applyLanguage('en');
}

// 사용자가 언어를 변경할 때마다 저장
function changeLanguage(lang) {
  applyLanguage(lang);
  localStorage.setItem('lang', lang);
}

스토리지 메소드를 사용하면 사용자의 환경 설정 또는 기타 데이터를 지속적으로 유지할 수 있어 편리합니다.

결론

스토리지 메소드를 사용하여 웹 어플리케이션에서 데이터를 저장하고 관리할 수 있습니다. localStorage와 sessionStorage는 각각 영구적인 저장과 세션 기반 저장을 제공하여 다양한 사용 사례에 유용하게 활용될 수 있습니다.