먼저 요청받았던 부분은 상품목록에서 상세보기로 이동한 후
뒤로가기를 하였을 때 기존 목록(검색조건 및 보고있던 상품목록 부분 등)이 유지되지 않고
새 페이지가 로딩 되어 기존정보가 유지되도록 해달라는 것이었다.
이 문제를 해결하기 위해 3가지 방법을 고려 하였고
Session Storage를 사용하여 문제를 해결하였다.
1. javascript history-back cache 사용
- 가장 이상적인 방법이라고 생각하였으나 브라우저 별, OS별로 버그가 있고
원하는 대로 페이지가 보이지 않을 확률이 높다는 정보가 있어 보류하였다.
2. (Vue.js) component keep-alive 사용
- 현재 페이지는 Vue를 사용하고 있기 때문에 목록 부분을 component로 만들고
그부분만 keep-alive라는 기능을 사용하여 보존하려고 하였으나 레퍼런스에 맞게 적용하였음에도
뒤로가기를 눌러 페이지로 돌아갔을 때 목록이 보존되지 않았다.
3. Session Storage 사용
- 상품목록페이지에서 상세페이지 진입시에는 Session Storage에 이전에 사용하였던 필터의 조건과 결과 목록을 저장해 놓고
상품목록페이지가 로딩될 때 상세페이지를 들렀었는지 구분하는 값을 Session Storage에서 꺼내 확인 후
상세페이지를 들렀던 경우라면 상품목록을 새로 받아오지않고 Session Storage에서 꺼내 목록을 세팅한다.
뒤로가기 문제를 해결한 것 뿐 만아니라
이전 버젼에서는 무조건 모든 목록을 새로 불러오기 때문에 속도가 좋지 않았는데
이번 변경으로 경우에 따라 목록을 새로 불러오지않는 부분이 추가되어 속도도 개선되었다.
'근무일지' 카테고리의 다른 글
알비트 근무일지 (0) | 2019.07.01 |
---|---|
비슷한 유형의 페이지의 중복되는 코드 모듈화 진행 (0) | 2019.04.02 |
페이지 이동중 뒤로가기에서 양식제출 오류 (0) | 2019.03.29 |
실시간으로 순위를 매겨 목록을 제공해야하는 페이지의 속도개선 (0) | 2019.03.14 |
고객목록(약3만)을 관리페이지에서 확인하는데에 너무오랜 시간이걸리는 이슈 (0) | 2019.03.07 |
댓글