WebStorage를 알아보자

왜 이걸 썼는가?

검색 후 클릭 --> 상세보기 페이지 --> 뒤로가기 --> 검색 조건 유지 안됨

이거를 해결하기 위해 sessionStorage를 쓰게 되었다.

// 상세보기 - 뒤로가기 버튼
pageBack() {
    var param = JSON.parse(sessionStorage.getItem('search'));
    location.href='/app/appList'+param;
};

<button type="button" class="btn btn-info btn-sm" th:attr="onclick=|app.pageBack()|">뒤로가기</button>
/*<![CDATA[*/
    <!-- 뒤로가기시 url 파라미터 session에 저장 -->
    sessionStorage.setItem('search',JSON.stringify(location.search));
/*]]>*/

참고 사이트

https://kingofbackend.tistory.com/178

https://huistorage.tistory.com/133

========

쿠키 vs 세션 vs LocalStorage vs SessionStorage

이 많은것 중에 SessionStorage를 선택한 이유

========
일단 쿠키와 스토리지는 비슷한 개념이라고 보면 된다.

스토리지는 Cookie에 비해 큰데이터를 저장할 수 있고 브라우저에 로컬하게 저장된다는 특징과 함께 서버로는 전송이 되지않는다는 차이가 있습니다.

• 쿠키
  브라우저 요청이 있을 경우 자동으로 서버에 전송한다.
  사용자의 하드에 저장되어 보안위험이 있다.
  같은 도메인 상에서 쿠키 값은 공유된다.
  하나의 쿠키는 4KB까지 저장 가능하다.
  key, value 데이터 파일로 이름, 값, 만료 날짜(저장 날짜), 경로 정보가 필요하다.
• 스토리지
  쿠키의 단점을 보완해서 만든 기술이다.
  key, value로 이루어진 데이터 파일이다.
  서버의 자원이 사용하므로 서버의 공간이 필요하다.
  기기마다 차이는 있으나 모바일 2.5MB, 데스크탑 5MB~10MB정도 저장 가능하다.
  쿠키 보다 보안이 우수하며 많은 정보를 담을 수 있다.
  Local Storage, Session Storage로 나뉘며 데이터의 만료에 따라 나뉜다. (사용자가 데이터를 삭제하지 않는 한)
  Local Storage = 만료기한 없음, Session Storage = 세션 종료 시 만료.

================

Local Storage : 

• 데이터의 만료기간이 없으며 사용자가 데이터를 지우지 않은 한 영구적으로 보존된다.
• 사이트 재 방문시 이전에 저장되었던 정보를 이용 할 수 있어 활용도가 높다.
• 사용자 설정 저장, 브라우저를 닫고 열었음에도 정보가 남아야 하는 것들을 저장할 때 사용한다.

Session Storage : 

• 데이터의 세션이 끝나면(브라우저 종료) 데이터가 지워진다.
• 휘발성 데이터를 저장할 때 사용한다.

===========

종합적으로 살펴보자면

쿠키는 데이터를 서버에 전송하므로 성능에 좋지 않으므로 패스

스토리지 중에서도 로컬은 브라우저를 닫았음에도 정보를 남길 이유가 하등없기에 패스

단순한 검색이므로 세션스토리지 사용함