html缓存代码（html设置缓存）[20240422更新]

本篇文章给大家谈谈html缓存代码，以及html设置缓存对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html禁止缓存代码
• 2、关于html缓存设置
• 3、html 页面怎么对缓存进行设置
• 4、html5 离线缓存怎么实现的

html禁止缓存代码

asp.net中可以这样设置

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Catch.aspx.cs" Inherits="Catch" %

% Response.Cache.SetExpires(DateTime.Now.AddSeconds(5)); %60; !- 5秒有效,设置成0就是不保存 --

% Response.Cache.SetCacheability(HttpCacheability.Public); % !- 换存类型 --

html xmlns=""

head runat="server"

title无标题页/title

/head

body

form id="form1" runat="server"

div

% = DateTime.Now.ToString() %

/div

/form

/body

/html

注意哦,只在IE中有效

关于html缓存设置

通过HTTP的META设置expires和cache-control

指令不区分大小写，并且具有可选参数，可以用令牌或者带引号的字符串语法。多个指令以逗号分隔。

客户端可以在HTTP请求中使用的标准 Cache-Control 指令。

Cache-Control: max-stale[=seconds]

Cache-Control: min-fresh=seconds

Cache-control: no-cache

Cache-control: no-store

Cache-control: no-transform

Cache-control: only-if-cached

服务器可以在响应中使用的标准 Cache-Control 指令。

Cache-control: no-cache

Cache-control: no-store

Cache-control: no-transform

Cache-control: public

Cache-control: private

Cache-control: proxy-revalidate

Cache-Control: max-age=seconds

Cache-control: s-maxage=seconds

拓展缓存指令不是HTTP缓存标准的一部分，使用前请注意检查 兼容性 ！

Cache-control: immutable

Cache-control: stale-while-revalidate=seconds

Cache-control: stale-if-error=seconds

public

表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。

private

表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）。

no-cache

强制所有缓存了该响应的缓存用户，在使用已存储的缓存数据前，发送带验证器的请求到原始服务器

only-if-cached

表明如果缓存存在，只使用缓存，无论原始服务器数据是否有更新

max-age=seconds

设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间。

s-maxage=seconds

覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略。

max-stale[=seconds]

表明客户端愿意接收一个已经过期的资源。 可选的设置一个时间(单位秒)，表示响 应不能超过的过时时间。

min-fresh=seconds

表示客户端希望在指定的时间内获取最新的响应。

must-revalidate

缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。

proxy-revalidate

与must-revalidate作用相同，但它仅适用于共享缓存（例如代理），并被私有缓存忽略。

immutable

表示响应正文不会随时间而改变。资源（如果未过期）在服务器上不发生改变，因此客户端不应发送重新验证请求头（例如If-None-Match或If-Modified-Since）来检查更新，即使用户显式地刷新页面。在Firefox中，immutable只能被用在 https:// transactions.

发送如下指令可以关闭缓存。此外，可以参考Expires 和 Pragma 标题。

对于应用程序中不会改变的文件，你通常可以在发送响应头前添加积极缓存。这包括例如由应用程序提供的静态文件，例如图像，CSS文件和JavaScript文件。另请参阅Expires标题。

缓存主要两个策略 强制缓存 ，协商缓存

强制缓存就是设置本地资源html img js等等缓存多长时间 超过时间就去服务器端取。

协商缓存就是每次都询问服务器资源是否已经过期 没有过期就使用缓存 已经过期就从服务器上重新取。

缓存流程可以分三个阶段 本地缓存，协商缓存 ，缓存失败

现在的vue项目里都不是这样缓存的 我个人感觉这是在静态页面时的缓存办法

现在都是webpack打包时通过 hash chunkhash contenthash来决定缓存方式 主要就是在请求的文件名称后面加一个id 来判断文件是否已经更新。

html 页面怎么对缓存进行设置

根据服务器系统环节的不同设置方法不一样

1、在Apache环境下

可以通过在.htaccess文件中添加下面的代码，设置图片的HTTP缓存和有效期（需要开启apache的headers模块支持）：

# Image and Flash content Caching for ONE Year blog.gimhoy.comFilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$" Header set Cache-Control "max-age=3156000"

其中max-age后面这个数字就是设置的缓存有效期（以秒为单位），比如上面的代码设置了网站的图片使用为期一年（3156000秒）的HTTP缓存。

2、在Nginx下

可以通过修改nginx.conf配置文件，来修改缓存设置：

location ~* \.(flv|gif|jpg|jpeg|png|ico|swf)$ { expires 1y; access_log off; break; }

注意：同样的方法，可以给js和css文件设置缓存。

html5 离线缓存怎么实现的

HTML5离线存储和本地缓存

一.离线存储

   有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来

   1.在index.html里加上html manifest="test.manifest"

   2.manifest清单格式如下

CACHE MANIFEST

#上面一句必须

#v1.0.0

#需要缓存的文件

CACHE:

a.js

b.css

#不需要缓存的文件

NETWORK:

*

#无法访问页面

FALLBACK:

404.html

   3.manifest文件的mime-type必须是 text/cache-manifest类型

   注意点：

   1.对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面，可以通过chrome浏览器Resources/Application Cache观察

   2.如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1

　4.离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本

window.applicationCache.addEventListener('updateready',function(e){

    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){

        window.applicationCache.swapCache();

        if(confirm("loding new?")){

            window.location.reload()

        }

    }

},false)    

二.本地缓存

localStorage.setItem("key","value")

localStorage.getItem("key","value")

localStorage.removeItem("key")

localStorage.clear()

    1.本地存储永不过期，除非自己去清除

    2.可以通过chrome浏览器Resources/Local Storage来查看

    3.不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1

html缓存代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html设置缓存、html缓存代码的信息别忘了在本站进行查找喔。