바닐라로 작성한 웹페이지
위의 순서로 실행을 하게 되면,
뒤로가기 실행을 하면 "클릭이벤트를 실행하지 않아도!!! 클릭이벤트가 이미 실행되어 있다!!"
왜냐하면 "Back Forward Cache" 때문
Back Forward Cache (BFCache)
- 페이지에 대한 추가적인 로딩을 하지 않고 자바스크립트 상태까지 유지한다고 함!
- The "cache" used by bfcache is different from the HTTP cache (which is also useful in speeding up repeat navigations). The bfcache is a snapshot of the entire page in memory (including the JavaScript heap), whereas the HTTP cache contains only the responses for previously made requests.
pageshow/pagehide 이벤트 사용하기
pageshow 이벤트의 경우, 뒤로가기로 재진입한 경우에도 발생하는 이벤트
페이지가 열릴 때마다 수행되어야하는 코드가 있다면, pageshow 이벤트에 바인딩하는 것이 더 바람직
콜백으로 넘겨지는 event 파라미터의 속성 중 persisted가 true인 경우, BFCache로 부터 복원된 상태(뒤로가기 등으로 재진입한 상태임)
바닐라
window.onpageshow = function (event) {
if (event.persisted) {
console.log('BFCache로부터 복원된 것');
}
else {
console.log('새로 열린 페이지');
}
};
$(window).bind("pageshow", function (event) {
if (event.originalEvent.persisted) {
console.log("BFCahe로 부터 복원 된 것");
}
else {
console.log("새로 열린 페이지");
}
});