在现代的浏览器里,为了增强用户体验,浏览器一般都会把网页上所需的静态文件缓存到本地,再次刷新的时候则无需再重新加载,但是我们有时候就是不需要浏览器缓存这些文件,而是每次都从服务器端读取数据,可以用以下做法:

1.在html文件头部加上:

<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<meta HTTP-EQUIV="expires" CONTENT="0">

然而这些还是不够的,有些浏览器还是缓存了文件,那么就必须给每个文件加个后缀时间戳,告诉浏览器这个是新文件,必须重新加载,浏览器就会从新到服务器端读取数据文件显示出来。

<link href="reset.css?v=20150127" rel="stylesheet">  

Set-Cookie (cookie设定)
说明:浏览器访问某个页面时会将它存在缓存中,下次再次访问时就可从缓存中读取,以提高速度。当你希望访问者每次都刷新你广告的图标,或每次都刷新你的计数器,就要禁用缓存了。通常HTML文件没有必要禁用缓存,对于ASP等页面,就可以使用禁用缓存,因为每次看到的页面都是在服务器动态生成的,缓存就失去意义。如果网页过期,那么存盘的cookie将被删除。
用法:

<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

注意:必须使用GMT的时间格式。

2.js清除浏览器缓存  

为了减小浏览器与服务器之间网络传输压力,往往对静态文件,如js,css,修饰的图片做cache,也就是给这些文件的HTTP响应头加入 Expires和Cache-Control参数,并指定缓存时间,这样一定时间内浏览器就不会给服务器发出任何的HTTP请求(除了强制刷新),即使在 这段时间内服务器的js或css或图片文件已经更新多次,但浏览器的数据依然是原来最能初cache的旧数据,有没有办法让浏览器拿到已经修改后的最新数 据呢?

有,方法是用ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control,如下:

$.ajax({
type: "GET",
url: "static/cache.js",
dataType: "text",
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
}
});

这里用了jquery.

这样浏览器就会把最新的文件替换掉本地旧文件。

当然,这里还一个问题就是js必须知道服务器更新了那个js、css、图片,利用cookie和时间版本应该可以解决.

jquery自从1.2开始就有ifModified和cache参数了,不用自己加header

ifModified Boolean Default: false
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header.
cache Boolean Default: true
Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser.

$.ajax({
type: "GET",
url: "static/cache.js",
dataType: "text",
cache:false,
ifModified :true
});

3.如何去除图片缓存

在Web网站中,有时候修改图片显示仍然不是最新的,这是由于浏览器对图片的缓存造成.

(1)给图片url添加随机数参数,使浏览器每次重新请求图片(但是在IE浏览器中,缓存有可能还是不能清除,可以使用下面第二种方法)

<div class="login_main">
<div class="login_ptxt">
<div class="login_p">
<img alt=\"用户头像\"/>
</div>
</div>
</div>
$(".login_main .login_p img").attr("src", userIconUrl + "?temp=" + Math.random());//userIconUrl为图片URL

(2)第二种方法:动态添加img元素

<div class="login_main">
<div class="login_ptxt">
<div class="login_p">
<!--动态添加img标签-->
</div>
</div>
</div>
$(".login_main .login_p").append("<img alt=\"用户头像\"/>"); $(".login_main .login_p img").attr("src", userIconUrl + "?temp=" + Math.random());//userIconUrl
为图片URL

最后引用网上的评论:

链接:https://www.zhihu.com/question/27565755/answer/71171663
来源:知乎

彻底禁止缓存,这个需求是错误的。缓存是浏览器的功能特性,又不是 Bug。

通常的做法是给静态资源加入可以代表版本号的文件名,如 main.20151107.css,或者使用 Gulp 之类的 md5 插件来根据文件内容生成唯一的文件名。
浏览器发现文件不同了,自然会重新加载。

MD5参考:https://segmentfault.com/a/1190000002932998

关于禁止html缓存的更多相关文章

  1. Servlet过滤器——使用过滤器禁止浏览器缓存页面

    1.概述 IE缓存虽然能提高已储存网站的访问速度,但是过度的IE缓存会影响浏览器的响应速度.同时还可能为网站的运行带来一些不必要的麻烦.例如:可能会因为浏览器缓存的应用,而导致Web服务器不能准确的计 ...

  2. 禁止浏览器缓存- make sure web page is not cached

    如何禁止浏览器缓存,网上搜到的解决方法都测试无效. 基本上全都是 Cache-Control: no-cache Pragma: no-cache Expires: 0 Google了一下,找到了解决 ...

  3. location匹配禁止页面缓存

    php禁止页面缓存的办法 //设置此页面的过期时间(用格林威治时间表示),只要是已经过去的日期即可. add_header Expires: Mon, 26 Jul 1997 05:00:00 GMT ...

  4. AngularJs 禁止模板缓存

    因为AngularJs的特性(or 浏览器本身的缓存?),angular默认的HTML模板加载都会被缓存起来.导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板,自 ...

  5. 禁止ie缓存

    nocache.jsp:(后台配置)<%response.setHeader("Cache-Control","no-cache"); //HTTP 1. ...

  6. filter 过滤器 禁止浏览器缓存

    public class BrowserNoCacheFilter implements Filter { public void init(FilterConfig filterconfig) th ...

  7. 谷歌浏览器(Chrome)禁止浏览器缓存 设置

    在开发项目期间用谷歌浏览器调试,他总是缓存我的css样式这个很气人啊,后经过摸索找到了方法,如下 先F12或者shift+ctrl+j 打开调试者工具,在找Network这个tab按钮,点击进入,勾选 ...

  8. 巧用Fiddler代理来禁止资源缓存,从而达到每次都是从服务器加载最新的资源

    Fiddler ->  Rules ->  Performance  -> Disable Caching 直接设置禁用缓存,再在没有清除缓存功能的APP 中重新加载最新的页面, 每 ...

  9. 禁止浏览器缓存input值

    如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocomplete="off"; <input type="te ...

随机推荐

  1. handsontable-developer guide-load and save

    不过handsontable不能用jquery取对象 var $$ = function(id) { return document.getElementById(id); }, container ...

  2. Cacti部署

    1>监控概述   通常运维人员在一个企业当中所需要管理一台或者多台服务器,或者甚至更多,特别是BAT公司或者门户级别的公司,一个人管理的服务器可能上百甚至上千台                  ...

  3. 深海划水队项目--七天冲刺之day7

    站立式会议: 昨天已完成的工作:设置游戏按键,检查重合.检查是否超出边界.检查是否可以下落,方块的硬下落和软下落方法. 今日已完成的工作:添加方法:方块的着陆和消除. 工作中遇到的困难:在消除方块的时 ...

  4. Java Float类型 减法运算时精度丢失问题

    package test1; public class Test2 { /*** @param args*/public static void main(String[] args) {   Flo ...

  5. Android各国语言Values文件夹命名规则

    android多国语言文件夹文件汇总如下: 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港):values-zh-rHK 英语(美国):values-e ...

  6. linux下文件打包、压缩详解

    Linux平台下,有如下几种常见的压缩工具: ========================================================================= 工 具 ...

  7. linux下强行umount卸载设备

    卸载NFS,结果出现无法卸载的情况 umount /mnt/umount: /mnt: device is busy使用umount -f,问题依旧umount -f /mnt/umount2: De ...

  8. PostgreSQL创建表及约束

    创建表 语法: create table table_name ( column_name type column_constraint, table_constraint table_constra ...

  9. c++实验6 递归

    1 利用递归设计此函数. int p(int a,int b) { if(a>=b) ; else ; } //粘贴测试数据及运行结果: //测试数据 int main() { cout < ...

  10. 微信小程序遇到的问题

    1.小程序navigator点击时不显示背景颜色 详情见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigato ...