关于禁止html缓存

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

1.在html文件头部加上：

1 2 3 4

<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" >

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

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

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

1	<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,如下: 

1 2 3 4 5 6 7 8 9

$.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. 

1 2 3 4 5 6 7

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

3.如何去除图片缓存

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

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

1 2 3 4 5 6 7 8

<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元素

1 2 3 4 5 6 7 8 9 10 11

<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