How to prevent html5 page from caching?

2019-01-13 13:37发布

I converted a plain vanilla HTML page to HMTL5/CSS3 with a responsive layout, and for security reasons (dictated by the security people) the page must never cache.

The page previously used <meta http-equiv="Pragma" content="no-cache"> and <meta http-equiv="Expires" content="-1"> to prevent the page from being cached.

What replaces this in HTML5? How do you prevent an html page from caching in the client?

I've spent a week reading about manifest files, but they seem to do exactly opposite of what I want as attaching a manifest file explicitly causes the page it is attached to to cache.

And please don't refer me back to the w3c definition of which meta elements are now allowed — I understand that HTML5 does not include the cache-control or Pragma in meta elements.

I need to know what it does include that will prevent a page from being cached.

标签: html5 caching
4条回答
神经病院院长
2楼-- · 2019-01-13 13:43

I dislike appcache a tremendous amount. It almost works well but can be a real unforgiving pain. While doing some code refactoring, I realized that after logout, i could browse back to the the last page. Of course, refreshing browser it would force user back to login but this is not desired.

After searching around and seeing the options, I started to get a bit frustrated. I do not want to use appcache. I then realized that my code was redirecting to login page after destroying the session and got an idea, what if, I redirect to the home page instead? And voila, page was loaded, session checked (and of course not there), user redirected to login. Problem solved.

查看更多
We Are One
3楼-- · 2019-01-13 13:54

The previous answer may not consistently work to prevent caching or to clear existing cache in chrome but there is a work around.

1) To clear existing cache in chrome, it may be necessary to update all files of the website (eg by linking to a new css file on every page) along with an update of the cache-manifest before existing cache in chrome gets cleared upon the second visit of a page (because of the "flow" of the way in which a page is rendered: the first time a page is visited, the browser reads and caches the manifest , while proceeding with loading from existing cache. Only upon the second visit will the newly stored updated manifest be read and applied).

2) and if none of that helps, it is possible to include a script in the manifest file itself to check for a new manifest and if found, reload it and use the new manifest. This did the trick and resolved all remaining cases I tested for where files had remained persistently cached in chrome. I found this script on this page by Jason Stimpel.

<script type="text/javascript">
window.addEventListener('load', function (e) {
window.applicationCache.addEventListener('updateready', function (e) {
        window.location.reload();
    }, false);
}, false);
</script>
查看更多
\"骚年 ilove
4楼-- · 2019-01-13 13:56

I have been struggling with the same issue for quite some time. What works for me - at least so far - in Chrome, FF and IE is doing the following:

1) reference the manifest file <html lang="nl" manifest="filename.appcache"> From what I understand, this will cache everything that follows in this HTML document, hence a manifest file is needed to prevent this from happening:

2) use a manifest file filename.appcache with the following content which basically says: for all files, do not read from cache but from network server:

CACHE MANIFEST
# 2015-09-25 time 20:33 UTC v 1.01 
NETWORK:
*


3) a third step is required: each time you upload a (partial) update of your website, also change the manifest file by changing the date and time stamp in the comment(#) line. Why? Because if you do not change the manifest file, it will not be read and it will default to step 1 and thus cache and read from cache. The fact that the manifest file is changed, however, enforces the manifest file to be read again, and thus enforces that the "do not read from cache but read from network server" instruction therein, is applied again.

查看更多
我只想做你的唯一
5楼-- · 2019-01-13 13:57

In the beginning of code you need to use this:

<!DOCTYPE html>
<html manifest="manifest.appcache">
...

Then create manifest.appcache with such content:

CACHE MANIFEST

# Cache manifest version 1.0

# no cache

NETWORK:
*
查看更多
登录 后发表回答