html页面清除缓存

原创已于 2023-05-14 17:34:15 修改 · 879 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #缓存 #前端

于 2023-04-11 18:24:48 首次发布

本文介绍了如何使用meta标签来控制网页的缓存策略，包括设置`Content-Type`,`X-UA-Compatible`,`pragma`,`cache-control`和`expires`属性。重点讨论了HTTP头信息`Expires`和`Cache-Control`在管理浏览器缓存中的作用，以及`no-cache`和`no-store`指令的含义。此外，还提到了通过在URL后添加随机参数如时间戳或随机数来强制刷新页面的方法。

1、meta标签

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">

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

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

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

　　HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，同样可以包含在头信息中。

2、在需要打开的url后面增加一个随机的参数

var url = 'xxx.html?r=' + Math.random();

var url = 'xxx.html?tm=' + new Date().getTime();