HTML page clears the page cache each time it is opened

Last Update:2018-07-27 Source: Internet

Author: User

Tags browser cache

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The solution is:

(1) Setting HTTP header information with HTML tags

<HEAD>

</HEAD>

Description: HTTP header information "Expires" and "Cache-control" provide an application server with a mechanism to control caching on the browser and proxy servers. HTTP header information expires tells the proxy server when its cached pages will expire. The newly defined header information in the HTTP1.1 specification Cache-control can inform the browser not to cache any pages. When you click the Back button, the browser re-accesses the server has fetched the page. Here are the basic ways to use Cache-control:

1) No-cache: Force cache to fetch new pages from the server

2) No-store: Cache does not save any pages in any environment

The Pragma:no-cache in the HTTP1.0 specification is equivalent to Cache-control:no-cache in the HTTP1.1 specification and can also be included in the header information.

(2) Add a random parameter after the URL that needs to be opened:

Before adding parameters: url=test/test.jsp

After adding parameters: Url=test/test.jsp?ranparam=random ()

Note: Because the URL after each request is not the same, the equivalent of requesting a different page, in such a way to curve the salvation, clear the cache

(3)

Chrome:

Now the new version of Chrome has a disable cache option in the developer Tools (F12) settings (there is a gear mark in the lower right corner). Hook it up and you can.

(4) Ajax methods

Method One: Use Ajax to request the latest server files, and add the request headers If-modified-since and Cache-control, as follows:

$.ajax ({
URL: ' www.haorooms.com ',
DataType: ' JSON ',
data:{},
Beforesend:function (xmlHttp) {
Xmlhttp.setrequestheader ("If-modified-since", "0");
Xmlhttp.setrequestheader ("Cache-control", "No-cache");
},
Success:function (response) {
Operation
}
Async:false
});
Method two, directly with Cache:false,

$.ajax ({
URL: ' www.haorooms.com ',
DataType: ' JSON ',
data:{},
Cache:false,
Ifmodified:true,

Success:function (response) {
Operation
}
Async:false
});
(5): With random numbers, random numbers are also a good way to avoid caching!

URL parameter Plus "? ran=" + math.random (); Of course here the parameter ran can be arbitrarily taken
eg
<script>
document.write ("<s" + "Cript type= ' text/javascript ' src= '/js/test.js?" +math.random () + "' ></scr" + "ipt>");
</script>

Other similar, simply add +math.random () after the address
Note: Because Math.random () only works under JavaScript, it can only be accessed through JavaScript calls.
Method Four: Use random time, same as random number.

After the URL parameter, add "? timestamp=" + New Date (). GetTime ();
(6) Clean with PHP backend

Add header ("Cache-control:no-cache, Must-revalidate") to the server and so on (e.g. in PHP)

(7) Window.location.replace ("WebForm1.aspx");
The parameter is the page you want to overwrite, and replace replaces the page specified by the Replace parameter with the current page.
This prevents the user from clicking the back key. JavaScript scripts are used, for example:
A.html
The following is a reference fragment:
<title>a</title>
<script language= "JavaScript" >
Function jump () {
Window.location.replace ("b.html");
}
</script>
<body>
<a href= "Javascript:jump ()" >b</a>
</body>

B.html
The following is a reference fragment:
<title>b</title>
<script language= "JavaScript" >
Function jump () {
Window.location.replace ("a.html");
}
</script>
<body>
<a href= "Javascript:jump ()" >a</a>
</body>

(8) Add version number (e.g. Layout.css?v=1)

Personally think Method 2 is faster, because clearing the browser cache is also waiting for the browser to respond. But it's also cumbersome to change the version number every time, so you need to find ways to automatically add the version number.

Here are the methods I collected:

Method One: You can automatically add a version number to HTML via JS

<script type="Text/javascript" >
document.write ("<link rel= ' stylesheet ' type= ' text/css ' href= '/css/layout.css?v=" +new Date (). GetTime () +">");
</script>

Method Two: If the JSP page, you can use Java code to generate timestamps (if the JSP page with method one, but this method is more convenient)

   <link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

Method Three: Add a version number using another method, such as automatic configuration with node. js

PS: We clear the purpose of the cache is to see the page updates, when we put the page (that is, deployed to the formal environment, no further changes), it is recommended to fix the version number, because the cached page access faster, need to update the time to replace the fixed version number.

HTML page clears the page cache each time it is opened

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More