关于禁止html缓存
在现代的浏览器里,为了增强用户体验,浏览器一般都会把网页上所需的静态文件缓存到本地,再次刷新的时候则无需再重新加载,但是我们有时候就是不需要浏览器缓存这些文件,而是每次都从服务器端读取数据,可以用以下做法:
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
最后引用网上的评论:
来源:知乎
通常的做法是给静态资源加入可以代表版本号的文件名,如 main.20151107.css,或者使用 Gulp 之类的 md5 插件来根据文件内容生成唯一的文件名。
浏览器发现文件不同了,自然会重新加载。
MD5参考:https://segmentfault.com/a/1190000002932998
关于禁止html缓存的更多相关文章
- Servlet过滤器——使用过滤器禁止浏览器缓存页面
1.概述 IE缓存虽然能提高已储存网站的访问速度,但是过度的IE缓存会影响浏览器的响应速度.同时还可能为网站的运行带来一些不必要的麻烦.例如:可能会因为浏览器缓存的应用,而导致Web服务器不能准确的计 ...
- 禁止浏览器缓存- make sure web page is not cached
如何禁止浏览器缓存,网上搜到的解决方法都测试无效. 基本上全都是 Cache-Control: no-cache Pragma: no-cache Expires: 0 Google了一下,找到了解决 ...
- location匹配禁止页面缓存
php禁止页面缓存的办法 //设置此页面的过期时间(用格林威治时间表示),只要是已经过去的日期即可. add_header Expires: Mon, 26 Jul 1997 05:00:00 GMT ...
- AngularJs 禁止模板缓存
因为AngularJs的特性(or 浏览器本身的缓存?),angular默认的HTML模板加载都会被缓存起来.导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板,自 ...
- 禁止ie缓存
nocache.jsp:(后台配置)<%response.setHeader("Cache-Control","no-cache"); //HTTP 1. ...
- filter 过滤器 禁止浏览器缓存
public class BrowserNoCacheFilter implements Filter { public void init(FilterConfig filterconfig) th ...
- 谷歌浏览器(Chrome)禁止浏览器缓存 设置
在开发项目期间用谷歌浏览器调试,他总是缓存我的css样式这个很气人啊,后经过摸索找到了方法,如下 先F12或者shift+ctrl+j 打开调试者工具,在找Network这个tab按钮,点击进入,勾选 ...
- 巧用Fiddler代理来禁止资源缓存,从而达到每次都是从服务器加载最新的资源
Fiddler -> Rules -> Performance -> Disable Caching 直接设置禁用缓存,再在没有清除缓存功能的APP 中重新加载最新的页面, 每 ...
- 禁止浏览器缓存input值
如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocomplete="off"; <input type="te ...
随机推荐
- 深水划水队项目---七天冲刺之day4
由于有一名队员回家了,所以今天的站立式会议改成微信群线上讨论 工作进度: 1.游戏界面进一步美化中. 2.游戏基本功能已经初步实现. 3.计划今天内商讨出如何实现游戏中的难度选择功能与道具功能. 工作 ...
- Java对象和XML转换
有时候,我们需要把Java对象转换成XML文件.这时可以用JAXB来实现.(JDK1.6及以后的版本无需导入依赖包,因为已经包含在JDK里了) 假如某个公司有许多部门,每个部门有许多职员,我们可以这样 ...
- Android-工作总结-LX-2018-08-20-setHint
问题的因素: 调试了一下午,我一直是以为是数据没有传递过来,然后一直在数据获取环节检查在检查,数据跟踪在跟踪,最后发现数据获取是OK
- 在 Docker 中部署 ASP.NET CORE 应用
有了 Docker 之后, 部署起来却这间非常方便,环境不用搭了, 直接创建一个 microsoft/aspnetcore 的容器, 在本地开发好后, 把内容直接部署到容器中. 下面的命令是把本地发布 ...
- c#设计模式之观察者模式(Observer Pattern)
场景出发 一个月高风黑的晚上,突然传来了尖锐的猫叫,宁静被彻底打破,狗开始吠了,大人醒了,婴儿哭了,小偷跑了 这个过程,如果用面向对象语言来描述,简单莫过于下: public class Cat { ...
- Asp.NetCore安全验证之JWT
本文只是介绍了下基于AspNetCore自带的System.IdentityModel.Tokens.Jwt.dll工具在项目中Token的应用. 我这里谈到的很浅显就两点: 一,超时时间 二,数据的 ...
- UWP开发入门(一)——SplitView
接下来会写一个UWP(Universal Windows Platform)开发入门的系列,自己学习到哪里,有什么心得总结,就会写到哪里.本篇对适用于顶层导航的SplitView控件展开讨论. 首先S ...
- Hibernate继承映射(@Inheritance)
继承映射在 Annotation 中使用 @Inheritance 注解,并且需要使用 strategy 属性指定继承策略,继承策略有 SINGLE_TABLE.TABLE_PER_CLASS 和 J ...
- Android性能测试-内存
前言: 近阶段都在探索android性能测试方面的东西,其中一个很重要的指标就是内存.对于内存,主要是一些gc是不是及时,或者说一些引用有没有及时释放,有没有导致oom或者内存持续增加导致卡顿,有没有 ...
- 前端必学内容:webpack3快速入门 1-23节内容参考
前端必学内容:webpack(模块打包器) webpack3 学习内容,点击即可到达 (1).webpack快速入门——如何安装webpack及注意事项 (2).webpack快速入门——webpac ...