Safari, Firefox 브라우저에서는 동일 세션에서 이전 페이지를 빠르게 보다 로딩하기 위하여 BFCache 기능을 이용하여 이전에 저장한(캐싱) 데이터를 바로 로드하고 있는 형태입니다.
이때 Javascript 상태값까지 모두 저장된 값으로 재사용하게 되는데 서버단(jsp,asp)에서 데이터 처리 및 화면 구성이 끝나는 페이지 구성일 경우에는 이러한 데이터 재사용이 문제가 되지 않지만 window.onload 나 Jquery의 $(document).ready() 단계 에서 Ajax를 통하여 로그인이나 주요 화면처리하는 로직이 들어있는 구성인 경우에는 BFCache를 통해 이전 데이터를 불러오는 것은 이슈가 될 수 있습니다.
예를들어 페이지 구성 로직을 서버단에서 모두 처리하여 세팅하는 것이 아니라 $(document).ready() 단계에서 AJAX를 사용하여 데이터들을 핸들링하여 화면로직을 처리하게끔 구성되어 있는경우 문제가 발생됩니다.
* 해결책 - onpageshow
이를 해결하기 위한 방법으로 페이지가 로드될때마다 무조건 발생하는 onpageshow 이벤트를 사용합니다.
onpageshow 이벤트는 onload이벤트와 비슷하지만 onload 이벤트는 페이지가 캐시에서 로드될때는 발생하지 않는 이벤트인 반면에 onpageshow 이벤트는 페이지가 로드 될때마다 무조건 발생하는 이벤트입니다.
onpageshow 이벤트에 함수를 바인딩 하고 함수내에서 페이지가 캐시(BFCache)되었는지 알아 보기 위하여 persisted 속성을 사용하는데 이 속성은 페이지가 캐시되었을 경우(뒤로가기) true를, 아닐 경우 false를 반환 합니다.
그리고 true값을 리턴 받았을 경우 강제로 페이지를 리로드하여 데이터를 재조회 할 수 있게끔 처리해 주시면 됩니다.
참조 블로그 - https://ifuwanna.tistory.com/63
'Front > JavaScript' 카테고리의 다른 글
| for await of (0) | 2020.11.12 |
|---|---|
| 자바스크립트 코드 별 성능 비교 / 스코프 체인 (0) | 2020.08.31 |
| 특정일로 부터 날짜 계산 (JavaScript) (0) | 2020.07.28 |
| 웹 실행순서 (java > jstl > html > javascript) (1) | 2020.01.13 |
| Web Storage(local, session) (0) | 2019.11.19 |