# BFCache란?

모바일 웹을 개발하다가 특정 OS/브라우저의 특성에 따른 이슈가 많이 발생한다. 아이폰(IOS) Safari 브라우저에서 뒤로가기(history.back) or 동일 페이지로 이동했을때 페이지가 reload되지 않고, 스크립트가 정상적으로 실행되지 않는 증상이 발생하는 경우가 생겼다.

**BFCache는 Back-Forward Cache로 safari, firefox 브라우저에서 동일 세션에서 이전 페이지를 보다 빠르게 로딩하기 위해 이전에 저장한 데이터를 바로 로드**하고 있다.

이떄 Javascript 상태값까지 저장된 값으로 재사용하게 되는데, `window.onload` 혹은 `$(document).ready()` 단계에서 처리하는 로직이 있는 경우에는 BFCache를 통해 이전 데이터를 불러오지 것은 이슈가 될 수 있다.

이때 `onpageshow()` 이벤트를 이용해 해당 문제를 해결할 수 있다.

* `onpageshow` : 페이지가 로드될때마다 무조건 발생하는 이벤트
* `persisted` 속성 : 페이지가 캐시되었을 경우 true, 아닌 경우 false를 return

```javascript
$(window).bind('pageshow', function(event){
  if(event.originalEvent && event.originalEvent.persisted){
    location.reload();
 }
});
```

즉, 페이지가 로드될때마다 `persisted` 속성이 true이면 `location.reload()` 리로드 해주어 해결한다.

## 참조 페이지

* <https://ifuwanna.tistory.com/63>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dahye-jeong.gitbook.io/til/javascript/2020-03-15-bfcache.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.