JavaScript 뒤로가기 시 데이터 유지

요약

window 객체를 이용한  뒤로가기, 새로고침 확인 코드와 sessionStorage 를 통해

이전 데이터 유지 기능을 구현하였다.

 

 

 

---

문제

1. 뒤로가기 시 검색결과 데이터 날라감

검색을 하고 해당 페이지로 들어간 뒤

같은 검색결과의 다른 페이지를 보고싶은데

홈화면으로 돌아가는 문제가 있었다.

 

 

 

---

가설

1. 뒤로가기 시 검색결과 데이터 날라감

찾아보니 세션스토리지를 사용하면 된다고 해서

사용법을 정리해두려한다. 

 

찾아보니 setItem으로 키밸류 데이터를 저장할 수 있다.

input에 값이 들어오면 검색텍스트를 저장했다가

페이지 이동시 뒤로가기를 눌렀을 때

저장된 값을 input에 넣어 다시 검색되도록 코드를 짜봐야겠다.

 

 

 

---

해결

1. 뒤로가기 시 검색결과 데이터 날라감

function captureInput() {
  userInput = searchInput.value;
  sessionStorage.setItem('DATA', userInput)

 

captureInput에서 유저가 검색값을 입력하면

세션스토리지로 저장되도록 코드를 작성했다.

 

// SessionStorage
window.onpageshow = function (event) {
  const card = document.getElementsByClassName('card')

  if (event.persisted || (window.performance && (window.performance.navigation.type == 1 || window.performance.navigation.type == 2))) {
    if (('sessionStorage' in window) && window['sessionStorage'] !== null) {
      if (sessionStorage.getItem('DATA')) {
        var a = sessionStorage.getItem('DATA');
        searchInput.value = a;
        captureInput()
      } else {
        topRated()
      }
    }
  } else if (card.length == 0) {
    topRated()
  }
}

 

그리고 윈도우 페이지가 열리면 새로고침 or 뒤로가기 버튼이 실행됐었는지 체크하고

세션 값이 있을 경우 해당 값으로 다시 검색 API가 작동되게끔 설정했다.

 

그렇지 않으면 card 클래스의 개수를 세어서

데이터가 없으면 Top Rated API를 받아오게끔 작성했다.

 

 

 

 

---