admin管理员组

文章数量:1279145

I'm trying to detect if my current page is loaded from cache or is a fresh copy.

I have the onPageShow callback registered on my body tag. I can see it being triggered, but I cannot produce a circumstance where the event.persisted is actually true.

I've even put firefox in offline mode and I see the response being fetched from cache on the network tab but event.persisted is still false.

I'm trying to detect if my current page is loaded from cache or is a fresh copy.

I have the onPageShow callback registered on my body tag. I can see it being triggered, but I cannot produce a circumstance where the event.persisted is actually true.

I've even put firefox in offline mode and I see the response being fetched from cache on the network tab but event.persisted is still false.

  • javascript
  • pageshow
Share Improve this question asked Mar 2, 2019 at 13:09 SnelleJelleSnelleJelle 9635 gold badges18 silver badges35 bronze badges 3
  • Have you tried this on various browsers? Also, try navigating back to the page - it should be definitely loaded from the cache. E.x you have onpageshow event registered on the body tag, then click on some link to open another page in the same tab, then navigate back to the original page. Does it fire? – Sebastian Kaczmarek Commented Mar 5, 2019 at 8:34
  • Try this: stackoverflow./a/265125/850347 – Stanley Ko Commented Mar 5, 2019 at 8:49
  • 1 There is an open bug in Chrome that prevents this from working bugs.chromium/p/chromium/issues/… – lofihelsinki Commented Mar 6, 2019 at 13:32
Add a ment  | 

5 Answers 5

Reset to default 5 +250

Umm I can confirm var isCached = performance.getEntriesByType("navigation")[0].transferSize === 0; this does work on Chrome. Worth trying out. Also as other suggested you might wanna look at this example How can I use JavaScript to detect if I am on a cached page

From google books

This works in mozilla perfectly.

Try the below code

<meta http-equiv="Cache-control" content="public">
...
<body onpageshow="onShow(event)" onpagehide="onHide(event)">
    <div  >
            <a href='/new.html' >Next page</a>
    </div>
<script>
function onShow(event) {
       if (event.persisted) {
                alert('Persisted...');
       }
}
function onHide(event) {
        if(event.persisted) {
                alert("Persisted")
        }
}
</script>
</body>

Add any code in new.html. Blank page is also fine

Then use the browser back. You'll get the alert persisted

Note: Use a domain or ngrok . Cache doesn't work in local Reload wont trigger persisted. I tried only with page show/hide

I'am skipping the alternative answers to find cache or not

IE11 does have window.performance.getEntriesByType('navigation') but doesn't have transferSize. However, it seems to leave out connectEnd if the page es from browser cache.

Extending on @subhendu-kundu s answer, this should also work on IE11

<script>

  window.addEventListener('pageshow', function(event) {

    if (window.performance) {
      var navEntries = window.performance.getEntriesByType('navigation');
      if (navEntries.length > 0 && typeof navEntries[0].transferSize !== 'undefined') {

        if (navEntries[0].transferSize === 0) {
          // From cache
        }

      } else if (navEntries.length > 0) {

        // IE11 seems to leave this pletely if loaded from bfCache
        if (!navEntries[0].connectEnd) {
          // From cache
        }

      }
    }

  });

</script>

I don't know if i understood your question correctly, you want to check if the page that is loaded is from disk/memory cache or a fresh one. Please ment below if i understood it wrong.

I'm trying to detect if my current page is loaded from cache or is a fresh copy.

For this you can open the developer tools of your browser and check the network tab, if the page is loaded from cache it will show indication (from cache).

Chrome supports this out of the box but for fire fox i think you should install web-developer plugin : https://addons.mozilla/en-US/firefox/addon/web-developer/

Well one thing I can suggest to disable the cache in the browser and check the size of the fetched code chunk. For the same you can disable the cache from browser itself..(I am just suggesting my views).

本文标签： javascriptWhen does PageTransitionEventpersisted evaluate to trueStack Overflow

版权声明：本文标题：javascript - When does PageTransitionEvent.persisted evaluate to true? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741223304a2361383.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。