清除网页缓存的方法

蔚落 2024-02-19 16:04 43阅读 0赞

目的:清除浏览器缓存

浏览器缓存:有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。

使用方法:JS或者Jquery

方法一: meta方法用客户端代码使浏览器不再缓存Web页面：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;&nbsp;&nbsp;<code>http-equiv</code><code>=</code><code>"Expires"</code>&nbsp;&nbsp;&nbsp;<code>CONTENT</code><code>=</code><code>"0"</code><code>&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;&nbsp;&nbsp;<code>http-equiv</code><code>=</code><code>"Cache-Control"</code>&nbsp;&nbsp;&nbsp;<code>CONTENT</code><code>=</code><code>"no-cache"</code><code>&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;&nbsp;&nbsp;<code>http-equiv</code><code>=</code><code>"Pragma"</code>&nbsp;&nbsp;&nbsp;<code>CONTENT</code><code>=</code><code>"no-cache"</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

方法二: 清理form表单的临时缓存

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>body</code>&nbsp;<code>onLoad</code><code>=</code><code>"javascript:document.yourFormName.reset()"</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

还可以利用jquery ajax清除浏览器缓存

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>$.ajax({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:</code><code>'</code> <code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>dataType:'</code><code>json',</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>beforeSend&nbsp;:</code><code>function</code><code>(xmlHttp){&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>xmlHttp.setRequestHeader(</code><code>"If-Modified-Since"</code><code>,</code><code>"0"</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>xmlHttp.setRequestHeader(</code><code>"Cache-Control"</code><code>,</code><code>"no-cache"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:</code><code>function</code><code>(response){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//操作</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>async:</code><code>false</code> <code>&nbsp;</code><code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

方式二：直接用cache:false,

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>$.ajax({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:</code><code>'</code> <code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>dataType:'</code><code>json',</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>cache:</code><code>false</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ifModified&nbsp;:</code><code>true</code>&nbsp;<code>,</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:</code><code>function</code><code>(response){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//操作</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>async:</code><code>false</code> <code>&nbsp;</code><code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

方法三：用随机数，随机数也是避免缓存的一种很不错的方法！

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>URL&nbsp;参数后加上&nbsp;?ran="&nbsp;+&nbsp;Math.random();</code><code>//当然这里参数&nbsp;ran可以任意取了</code> </td> 
 </tr> 
 </tbody> 
</table>

方法四：用随机时间，和随机数一样。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>在&nbsp;URL&nbsp;参数后加上&nbsp;?timestamp=+&nbsp;</code><code>new</code>&nbsp;<code>Date().getTime();</code> </td> 
 </tr> 
 </tbody> 
</table>

方法五：用php后端清理

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>在服务端加&nbsp;header(</code><code>"Cache-Control:&nbsp;no-cache,&nbsp;must-revalidate"</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

以上是网上常用的清除方法,另外在java中可以通过:JAVA后端清除Session缓存方法来实现

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>session.removeAttribute(</code><code>"user"</code><code>);&nbsp;&nbsp;</code> <code>session.removeAttribute(</code><code>"constant_cache"</code><code>);&nbsp;&nbsp;</code> <code>session.invalidate();</code> </td> 
 </tr> 
 </tbody> 
</table>

为什么要清除缓存呢，如果想不缓存，每次只要带不同的时间戳就可以了

在IE或者其他的很多浏览器中，如果你每次请求的地址是相同的，浏览器就不会去连接服务器而是去读取缓存，这样对于很多应用来时是非常好的，可以降低服务器的压力或者减少带宽的使用，但是对于ajax应用，很多都是必须保持时时的连接与服务器进行交互

所以需要使用一个小技巧，时间戳来使每次的请求地址都不同，从而跳过浏览器的缓存机制实现每次的请求服务器，这样的功能在图片验证码的时候也是比较常用的一种方法

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>convertURL(url){&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>timestmp&nbsp;=&nbsp;(</code><code>new</code>&nbsp;<code>Date()).valueOf();&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//将时间戳追加到url上面&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url&nbsp;=&nbsp;url+&nbsp;</code><code>"&amp;t="</code>&nbsp;<code>+timestmp;&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>url;&nbsp;&nbsp;&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

建议这样操作比较好，如果清理缓存，还要设置定时清理器，会比较麻烦