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

본문 바로가기

사이트 내 전체검색

425,060명이 방문해 주셨습니다.

[  JQUERY  ] [스토리지] localStorage / sessionStorage

작성일 20-02-07 01:01

페이지 정보

작성자최고관리자 조회 350회 댓글 0건

본문

*로컬스토리지(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 - 작성

댓글목록

등록된 댓글이 없습니다.

Copyright © 소유하신 도메인. All rights reserved.