[JavaScript] 뒤로가기 시 페이지 정보 및 스크롤 위치 불러오기

비동기로 불러온 데이터 sessionStorage에 저장

페이징 처리를 비동기로 한 경우 뒤로가기 시 스크롤 위치를 가져오기 위해서는 조회해서 불러온 데이터의 정보도 같이 저장해 둬야 함

이를 위해 sessionStorage에 스크롤 정보 및 조회한 데이터 정보를 저장함

 

또한 비동기로 페이징 처리 한 경우 스크롤의 위치는 callBack함수에서 설정해줘야 함

// 뒤로가기, 새로고침 시 정보를 계속해서 합치지 않도록 구분하는 값
let scrollSearching = false;

// 데이터 조회해서 페이징 처리하는 함수 예시
function axiosPaging(){
  axios({

  }).then(function (response) {
    // 뒤로가기, 새로고침인 경우 페이지 정보 ssesionStorage에서 가져오기
    if(!scrollSearching && performance.getEntriesByType("navigation")[0].type === 'back_forward' 
       || performance.getEntriesByType("navigation")[0].type === 'reload') {
      response.data.result = JSON.parse(sessionStorage.getItem("resultData"));
      scrollSearching = true; // 스크롤로 데이터 조회 시 정보를 한번 더 가져오지 않도록 구분하는 값
    }

    …
    if (Utils.isNull(response.data) == false) {
      if (response.data.status == 200 && Utils.isNull(response.data.result) == false) {
        // 조회 결과
        var result = response.data.result;

        // 페이지 정보
        page.no = pageNo;
        page.totalPage = Utils.isNull(result.totalPage) == true ? page.totalPage : result.totalPage;
        page.totalCount = Utils.isNull(result.totalCount) == true ? page.totalCount : result.totalCount;
        page.isLast = Utils.isNull(result.lastPage) == true ? page.isLast : result.lastPage;

        (페이지 html 구성)
      }
    }
    …

    // 뒤로가기 스크롤 정보 가져오기 위해 페이지 정보 저장
    if(page.no === 1){  // 1페이지 인 경우 불러온 모든 데이터 sessionStorage에 저장
      sessionStorage.setItem("resultData", JSON.stringify(response.data.result));
    }else { // 데이터 합쳐서 sessionStorage에 저장
      const obj = JSON.parse(sessionStorage.getItem("resultData"));
      obj.productList.push(...response.data.result.productList);
      const resultData = response.data.result;
      resultData.productList = obj.productList;

      sessionStorage.setItem("resultData", JSON.stringify(resultData));
    }

    savedScrollTo(); // 스크롤 위치 설정

  }).catch(function (error) {
    // 에러난 경우 실행
  });
}

 

---

스크롤 위치 저장 및 불러오기

아래의 코드 처럼 스크롤 위치를 설정하고 callBack함수에서 savedScrollTo()를 호출

스크롤 위치 저장하는 코드는 이전글 참고하기🍋

/**
 * 스크롤이 움직일때마다 값을 sessionStorage에 넣어줌
 */
let scrollHeight = 0;
addEventListener('scroll', (event) => {
    scrollHeight = $(document).scrollTop();
    sessionStorage.setItem("scrollY", scrollHeight);
});

/**
 * 스크롤 위치 지정
 */
function savedScrollTo(){
    if (window.performance && performance.getEntriesByType("navigation")[0].type === 'back_forward' 
        || performance.getEntriesByType("navigation")[0].type === 'reload') {

        const scrollY = parseInt(sessionStorage.getItem("scrollY"));
        if(scrollY && scrollY > 0){
            window.scrollTo(0, scrollY);
        }
    }
};