[스토리지] localStorage / sessionStorage > 학습

*로컬스토리지(localStorage), 세션스토리지(sessionStorage): HTML5에 추가된 저장소

*메소드는 clear, getItem, setItem, removeItem, key 등이 있으며 모든 메소드가 같습니다.

(key, value)형태의 스토리지이며,

로컬스토리지와 세션스토리지의 차이점은 데이터의 영구성입니다.

로컬스토리지의 데이터는 브라우저를 종료해도 남아있습니다.(사용자가 삭제시에는 남아있지 않음.)

반대로, 세션스토리지는 브라우저를 종료하면 사라집니다.

<script>
$(document).ready(function(){
  /*****클릭시 텍스트 변환(스토리지를 이용하면 페이지 이동시에도 데이터는 남아있다.)*****/
  $(".text").toggle(function(){
    $(this).text("hide");
    sessionStorage.setItem('view', 'hide');
  }, function(){
    $(this).text("show");
    sessionStorage.setItem('view', 'show');
  });

  /*****페이지를 이동해도 스토리지에 저장된 값(데이터)을 비교해 상태를 유지할 수 있다*****/
  if(sessionStorage.getItem('view') == 'hide'){
    $(".text").text("hide");
  }else if(sessionStorage.getItem('view') == 'show'){
    $(".text").text("show");
  }
});
</script>

<p class="text">show</p>

2020.02.06 - 작성