html5 缓存页面 html页面缓存设置

转载

mob64ca13fe62db 2023-11-29 17:31:22

前端设置http缓存,前端设置html页面缓存方法：静态的html页面想要设置使用缓存需要通过HTTP的META设置expires和cache-control

设置如下网页元信息:

<meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />

解答:

cache-control：||no-cache||no-store||max-age

1.no-cache：

表面意为“数据内容不被缓存”，而实际数据是被缓存到本地的，只是每次请求时候直接绕过缓存这一环节直接向服务器请求最新资源，由于浏览器解释不一样，

例如ie中我们设置了no-cache之后，请求虽然不会直接使用缓存，但是还会用缓存数据与服务器数据进行一致性检测(也就是说还是有几率会用到缓存的),

firefox中则完全无视no-cache存在，详细解释见no-store;

2.no-store：

指示缓存不存储此次请求的响应部分。与no-cache比较来说，一个是不用缓存，一个是不存储缓存;按理来说这个设置更加粗暴直接禁用缓存，

但是具体实现起来浏览器之间差异却特别大，一般不会直接用该字段进行设置，不过no-store是为了防止缓存被恶意修改存储路径导致信息被泄露而设置的，

毕竟有它的用处，在firefox中实现缓存是通过文件另存为将缓存副本保存到本地，直接利用no-cache对其是无效的，如果加上no-store设置的话则可以起到与no-cache一样的效果;

即：cache-control:no-cache,no-store;可以确保在支持http1.1版本中各大浏览器回车后退刷新无缓存；

再加上Pragma: no-cache设置兼容版本1.0即可(不过为了防止一致性检测时候的万一我们还是最好加上一致性检测的内容，如下所示几种方式)；

3.max-age：

例如Cache-control: max-age=3；表示此次请求成功后3秒之内发送同样请求不会去服务器重新请求，而是使用本地缓存；同样我们如果设置max-age=0表示立即抛弃缓存直接发送请求到服务器

HTML <meta> http-equiv

html5 缓存页面 html页面缓存设置_html

HTML <meta> 标签

每隔 30 秒刷新一次文档：

<head> 
   
<meta http-equiv="refresh" content="30"> 
   
</head>

尝试一下 »

html5 缓存页面 html页面缓存设置_http缓存_02

html5 缓存页面 html页面缓存设置_meta_03

html5 缓存页面 html页面缓存设置_http缓存_04

html5 缓存页面 html页面缓存设置_html5 缓存页面_05

html5 缓存页面 html页面缓存设置_html_06

所有主流浏览器都支持 http-equiv 属性。

http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。

http-equiv 属性可用于模拟一个 HTTP 响应头。

使用 http-equiv 已经不是规定 HTML 文档的字符集的唯一方式：

<meta http-equiv="content-type|default-style|refresh">

值	描述
content-type	规定文档的字符编码。实例： <meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-style	规定要使用的预定义的样式表。实例： <meta http-equiv="default-style" content="the document's preferred stylesheet"> 注释：上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。
refresh	定义文档自动刷新的时间间隔。实例： <meta http-equiv="refresh" content="300"> 注释：值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制。在 W3C's Web 内容可访问性指南中使用 "refresh" 会到导致失败。