The page is not refreshed after the return, and some invalid information is still displayed on the page. This issue will appear on iPhone and refresh automatically when you return to Android (there are not many types of mobile devices to do more testing, welcome to add).

I tried a lot of solutions to this problem with timers and onloads and all that didn’t work, but I found a method called PagesHow.

The onPagesHow event is triggered when the user is browsing the web page.

The onPagesHow event is similar to the onLoad event, the onLoad event is fired when the page is first loaded, and the onPagesHow event is fired every time the page is loaded, that is, the onLoad event is not fired when the page is read from the browser cache. Pagehide is also triggered when pagehide is not displayed.

To see if the page is being loaded directly from the server or read from the cache, the persisted property of the PageTransitionEvent object is used.

window.addEventListener('pageshow'.function(event) {
    console.log("PageShow Event " + event.persisted);
    console.log(event)
})
Copy the code

Return true if the page reads the property from the browser’s cache, false otherwise. The data is then updated by performing the corresponding page refresh action or by directly requesting the Ajax interface based on true or false. One drawback to this is that the page will refresh whether the data needs to be updated or not, and all we need to do is update the data. Therefore, I thought of another way to set up cache in pages where data changes may occur, that is, write a cache record as long as the page data changes, and detect this record after returning to the page, indicating the need for page refresh or call interface refresh.

The treatment method is as follows:

// set a.HTML to refresh to see if there are flags in the cache. If there are flags, the data has changed."pageshow".function() {if(sessionStorage.getItem("need-refresh")){
        location.reload();
        sessionStorage.removeItem("need-refresh"); }}); Sessionstorage.setitem (sessionStorage.setitem (sessionStorage.setitem))"need-refresh".true);
Copy the code

In a recent project using pagesHow, the persisted page is still false when the page is returned, so now you have to look for a different solution. Found that there is a window at this time. The performance object, performance. Navigation. The short type is an unsigned integer

  • TYPE_NAVIGATE (0) :

The current page is done by clicking on links, bookmarking, and form submission, or by scripting, or by entering the address directly in the URL with type 0

  • TYPE_RELOAD (1)

Click the refresh page button or the page displayed via the location.reload () method with a type value of 1

  • TYPE_BACK_FORWARD (2)

Pages are accessed through history and backwards and forwards. Type a value of 2

  • TYPE_RESERVED (255)

Any other way, the type value is 255, which is exactly what we need, so predictably, the solution is as follows:

window.addEventListener('pageshow', () = > {if (e.persisted || (window.performance && 
    window.performance.navigation.type == 2)) {
    location.reload()
  }
}, false)
Copy the code

Stackoverflow.com/questions/1…