로컬스토리지, 세션스토리지

로컬스토리지, 세션스토리지

웹 브라우저에서 클라이언트 측 데이터를 저장하는 저장소이다.

로컬스토리지 활용

function main() {
  let userName = localStorage.getItem('userName')
  
  const userNameElement = document.querySelector('#user-name');
  
  if (userName == null) {
    const userName = prompt('누구쎄요');
    localStorage.setItem('userName', userName);
  }

  userNameElement.innerText = userName;
}

document.addEventListner('DOMContentLoaded', main);

localStorage 에 저장된 값은 개발자도구 > Application탭 > Local storage에서 찾을 수 있고, 삭제 후 새로고침 시 다시 prompt가 뜬다.
'아이디 기억하기'와 같은 기능에 사용될 수 있다.

로컬스토리지 VS 세션스토리지

세션스토리지와의 차이점은 데이터 저장 주기이다.
로컬스토리지는 사용자가 값을 임의로 지우거나 코드 내 삭제 처리를 따로 해주지 않는 한, 브라우저를 닫거나 컴퓨터를 재시작하여도 데이터를 영구적으로 보관한다.
세션스토리지는 브라우저 창을 닫으면 데이터가 삭제되는 특성을 갖는다.

Summary

로컬스토리지와 세션스토리지는 웹 브라우저에서 클라이언트 측 데이터를 저장하는 저장소이다. 로컬스토리지는 데이터를 영구적으로 저장하며, 세션스토리지는 브라우저 세션 동안만 데이터를 저장한다는 차이가 있다.