使用HTML meta no-cache标签来禁用缓存

如何完美滴使浏览器访问一个 HTML 页面时禁用缓存?
在测试某个 SPA 项目时,发现更改后 Chrome 浏览器页面刷新还是使用之前的版本。经调查发现 Chrome 默认缓存值为 300 秒。

经测试跨浏览器禁止缓存的 headers 如下:
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
Cache-Control is for HTTP 1.1
Pragma is for HTTP 1.0
Expires is for proxies
因为是 HTML 页面,可以于 HEAD 标签内直接添加 META 标签:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
其他文件就需要使用服务器设置文件控制 header
==============
如果不想彻底禁止缓存可以采用下面的
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
==============
no-cache和no-store的区别:
no-cache 可以在本地缓存,可以在代理服务器缓存,但是这个缓存要服务器验证才可以使用
no-store 彻底得禁用缓冲,本地和代理服务器都不缓冲,每次都从服务器获取

在某些情况下,即使Cache-Control: no-cache在响应头文件中,IE6仍然会缓存文件。
W3C状态no-cache:
如果no-cache指令没有指定一个字段名称,那么缓存绝不能使用该响应来满足后续的请求,而不需要对源服务器进行成功的重新验证。

在我的应用程序中,如果访问了带有no-cache标题的页面,然后注销并在浏览器中回放,IE6仍然会从缓存中获取页面(没有向服务器发送新的/验证请求)。在no-store标题中添加停止它这样做。

但是如果你接受W3C的话,实际上没有办法控制这种行为:
历史缓冲区可以将这些响应作为其正常操作的一部分进行存储。
浏览器历史记录和常规HTTP缓存之间的一般差异在规范的特定子部分中描述。

=================
HTML中的Meta标签(no-cache)
根据HTML语言标准注释:meta标签是对网站发展非常重要的标签,它可以用于鉴别作者,设定页面格式,标注内容提要和关键字,以及刷新页面等等。

HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。

1.expires(期限)
说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅。
用法:<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
注意:必须使用GMT的时间格式。

2.Pragma(cach模式)
说明:禁止浏览器从本地机的缓存中调阅页面内容。
用法:<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
注意:这样设定,访问者将无法脱机浏览。

3.Refresh(刷新)
说明:需要定时让网页自动链接到其它网页的话,就用这句了。
用法:<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.baidu.com">
注意:其中的5是指停留5秒钟后自动刷新到URL网址。
下面标签作用是20秒自动刷新当前页面:
<meta http-equiv="refresh" content="20" />

4.Set-Cookie(cookie设定)
说明:如果网页过期,那么存盘的cookie将被删除。
用法:<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/"> 
注意:必须使用GMT的时间格式。

使用HTML meta no-cache标签来禁用缓存的更多相关文章

  1. HTMl中Meta标签详解以及meta property=og标签含义

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...

  2. [转]HTMl中Meta标签详解以及meta property=og标签含义

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...

  3. HTMl中Meta标签和meta property=og标签含义

    meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! me ...

  4. (转)Ratchet教程:meta与link标签

    原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签           ...

  5. meta property=og标签含义及作用

    不理解Meta Property=og标签是什么意思,以及对SEO的影响,看一下下面的介绍.Meta Property=og标签是什么呢?og是一种新的HTTP头部标记,即Open Graph Pro ...

  6. SmartSql Cache标签

    Demo <Cache Id="T_Test.LruCache" Type="Lru"> <Parameter Key="Cache ...

  7. meta标签设置不缓存

    平常调试的时候总是因为缓存问题有些浪费时间,加上这几行代码就ok了 <meta http-equiv="Cache-Control" content="no-cac ...

  8. 前端调试代码 chrom 和 火狐禁用缓存 Disabled cache

    前端调试的时候经常遇到缓存问题, chrome : f12  ---> 找到 Disabled caceh 勾上 火狐: f12 找到 禁用缓存

  9. django ngRoute ui-router 开发环境下禁用缓存

    问题描述: Python manage.py runserver ,禁用缓存,及时修改反馈到浏览器 解决办法: 使用dummy cache: Dummy caching (for developmen ...

随机推荐

  1. 版本管理_git

    git 世界上最好的版本管理工具,分布式版本控制系统. 林纳斯-托瓦斯,自由主义教皇(git.linux) git 不管理空文件夹 对比于 SVN mkdir XX        创建一个空目录 XX ...

  2. [LeetCode] Implement Rand10() Using Rand7() 使用Rand7()来实现Rand10()

    Given a function rand7 which generates a uniform random integer in the range 1 to 7, write a functio ...

  3. ajax 传递中文字符参数 问题

    使用ajax 传递中文字符串时, 服务端会接收不到预期的 中文字符. 此时,需要对 js中的中文字符参数进行 编码,  到达服务端后, 再为其解码 即可. 前端: var url = '....'; ...

  4. DataTable数据存储问题

    需求: 我想要实现这样一个效果:用户可以在表中通过右键新建行.删除行(这两个后面再写),编辑数据后进行保存.这里保存需要做一个区分,就是新增的和修改的.他们的区别就是新增的主键为空,而修改的因为原本就 ...

  5. less 基础+ flex

    1.less 中的变量 @ 符号 引入 /*普通变量*/ @color:pinker; .styles{ color:@color; } /*选择器变量*/ @I:img; @{I}{ width: ...

  6. linux下利用C或C++ 语言调用需要root权限的函数

    1.setuid法(1)登录root用户,将程序设置成root:root所有者(等价于:登录root用户编译程序).也可直接将普通用户加入root组中,那么编译程序不用来回切换用户.(2)登录root ...

  7. 简述移动端开发前端和app间的关系

    <p>前端页面嵌套进app内部,一般有时候会进行一些交互,类似于前端页面请求后台接口一样,通常会起一个前端开发人员和app开发人员会相互协定一个协议;双方就协议而言去进行请求接口和返回数据 ...

  8. es6 中的 symbol

    symbol 的引入是为了解决对象中的属性名冲突的问题 使用symbol() 函数生成的变量值不与任何的变量值相等,  所有用改变量的值做属性名是不会冲突的 symbol 可以转化为字符串, 可以转化 ...

  9. Babylon.js demo

    demo地址   访问demo  全屏试试  感觉很棒 在线文档  搜索:Default rendering pipeline demo源码在线调试地址

  10. layui 根据后台传来的值选择按钮

    {{# if(d.status == 'xxx'){ }} <a class="layui-btn layui-btn-xs layui-btn-disabled" lay- ...