HTML页面每次打开的时候都清除页面缓存

时间 2019-11-10

标签 html 页面每次打开时候清除缓存栏目 HTML 繁體版

原文原文链接

解决办法为：

（1）用HTML标签设置HTTP头信息javascript

<HEAD>php

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">css

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">html

<META HTTP-EQUIV="Expires" CONTENT="0">java

</HEAD>node

说明：HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面什么时候将过时。HTTP1.1规范中新定义的头信息Cache-Control能够通知浏览器不缓存任何页面。当点击后退按钮时，浏览器从新访问服务器已获取页面。以下是使用Cache-Control的基本方法：ajax

　　1) no-cache:强制缓存从服务器上获取新的页面chrome

　　2) no-store: 在任何环境下缓存不保存任何页面json

　　HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，一样能够包含在头信息中。后端

（2）在须要打开的url后面增长一个随机的参数：

增长参数前：url=test/test.jsp

增长参数后：url=test/test.jsp?ranparam=random()

说明：由于每次请求的url后面的参数不同，至关于请求的是不一样的页面，用这样的方法来曲线救国，清除缓存

（3）

chrome：

如今新版的Chrome在developer Tools（F12调出来）的Settings（右下角有个齿轮标志）中有了个Disable cache选项。勾了即可以。

（4）ajax方法

方式一：用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,以下:

$.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){
//操做
}
async:false
});
方法二，直接用cache:false,

$.ajax({
url:'www.haorooms.com',
dataType:'json',
data:{},
cache:false,
ifModified :true ,

success:function(response){
//操做
}
async:false
});
（5）：用随机数，随机数也是避免缓存的一种很不错的方法！

URL 参数后加上 "?ran=" + Math.random(); //固然这里参数 ran能够任意取了
eg:
<script>
document.write("<s"+"cript type='text/javascript' src='/js/test.js?"+Math.random()+"'></scr"+"ipt>");
</script>

其余的相似，只需在地址后加上+Math.random()
注意：由于Math.random() 只能在Javascript 下起做用，故只能经过Javascript的调用才能够
方法四：用随机时间，和随机数同样。

在 URL 参数后加上 "?timestamp=" + new Date().getTime();
（6）用PHP后端清理

在服务端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

（7）window.location.replace("WebForm1.aspx");
参数就是你要覆盖的页面，replace的原理就是用当前页面替换掉replace参数指定的页面。
这样能够防止用户点击back键。使用的是javascript脚本，举例以下：
a.html
如下是引用片断：
<html>
<head>
<title>a</title>
<script language="javascript">
function jump(){
window.location.replace("b.html");
}
</script>
</head>
<body>
<a href="javascript:jump()">b</a>
</body>
</html>

b.html
如下是引用片断：
<html>
<head>
<title>b</title>
<script language="javascript">
function jump(){
window.location.replace("a.html");
}
</script>
</head>
<body>
<a href="javascript:jump()">a</a>
</body>
</html>

（8）添加版本号（如 layout.css?v=1）

我的认为方法2更快，由于清除浏览器缓存还要等浏览器响应。可是每次更改版本号也很麻烦，因此须要想办法自动添加版本号，

如下是本人收集的方法：

方法一：能够经过js自动给html添加版本号

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

方法二：如果jsp页面，可使用java代码生成时间戳（如果jsp页面用方法一也行，但此方法更方便）

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

方法三：使用其余的方法添加版本号，如用node.js自动配置等

ps：咱们清除缓存的目的是为了及时看到页面的更新状况，当咱们将页面上线时（即部署到正式环境，不会再作更改），建议把版本号固定，由于有缓存的页面访问更快，须要更新的时候再更换下固定版本号。