html如何缓存
㈠ html5 离线缓存怎么实现的
HTML5离线存储和本地缓存
一.离线存储
有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来
1.在index.html里加上<htmlmanifest="test.manifest">
2.manifest清单格式如下
CACHEMANIFEST
#上面一句必须
#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/ApplicationCache观察
2.如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1
4.离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本
window.applicationCache.addEventListener('updateready',function(e){
if(window.applicationCache.status==window.applicationCache.UPDATEREADY){
window.applicationCache.swapCache();
if(confirm("lodingnew?")){
window.location.reload()
}
}
},false)
二.本地缓存
localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
1.本地存储永不过期，除非自己去清除
2.可以通过chrome浏览器Resources/LocalStorage来查看
3.不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1
㈡ html5缓存的问题，如何正确设置
html5缓存正确的设置办法：
1、启用缓存
设置方法：
<html manifest="example.appcache">
...
</html>
2、设定缓存访问的范围，配置到MANIFEST中：
CACHE MANIFEST
# v1 - 2011-08-13
# This is a comment.
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah
㈢ 怎么学习html5里面的离线缓存
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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文件缓存到服务器内存 （iis）
你好，这样是不太可取的。IIS和网站代码都没有这个功能设置。内存是用来临时存放运行文件的，一但断电就没有了，不能用来存长固定的文件。。如果同时请求访问的人数过多，那么可能会响应不过来。。另外，个人觉得目前我们网站访问的瓶颈并不是硬盘速度，服务器硬盘读也是百M/s的，而网络一般是十M，最多也才百M吧。。如果判断出的确是硬盘速度瓶颈，那么就使用固态硬盘。。。
个人建议启用IIS的Gzip压缩（网络：http://ke..com/view/966625.htm）是非常有效的。
当然了，如果你一定要将文件加载到内存里，可以试着用下面的方式，只是思路， 没有验证：
1、安装使用 内存虚拟硬盘（ramdisk） 相关软件，通过把内存虚拟成硬盘的技术增加一个高速的磁盘。
2、添加一个自动启动任务，就是在完成内存虚拟硬盘后，将网站源文件直接拷到那个虚拟盘分区里去。然后再启动IIS。 （这个步骤用一个批处理文件就可以）
理论上是可行的，我相信也一定可以成功，但至于效果，不太敢保证。
如果是静态文件，直接拷贝就可以，如果是动态的，在保存的，那么批处理文件就要进行修改了，不然断电后没有保存。。不过如果是动态网站，只需要把常用到的文件加载到内存是吧，那只在IIS上建立相应的虚拟目录到内存虚拟的硬盘上，那些有改动的文件，如xml文件和mdb数据库等，就直接保存到物理硬盘路径上，这样可以避免断电和内存出错导致的数据丢失
内存虚拟硬盘 网络：http://ke..com/view/1517248.htm
内存虚拟硬盘软件 vsuite ramdisk 网络：http://ke..com/view/5130752.htm
希望以上回复对你有帮助
㈤ html5怎么缓存动态html页面
HTML页面本身可以是模板，获取后台数据后动态更新页面。这种情况下用HTML5的OfflineWeb功能可以缓存作为模板的HTML页面。或者向FT那样，干脆把页面压缩存放在localstorage里，当然有容量限制。
㈥ 关于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）公众号放的菜单地址后加 ?version=1.0.0 每次更新页面则更新菜单；
但是这样每次发版还得修改公众号的菜单，多一步很不方便；
于是和前端一块尝试寻找到另一中解决方案：
（2）前端在html的header中加入缓存策略
<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" />
<meta http-equiv="Cache" content="no-cache" />
这样就彻底解决了缓存问题；
但是注意，往往遇到此问题时，已经缓存了没有加缓存策略的html文件，需要清除掉缓存，加载新的带缓存策略的html文件，将来才会实时更新；但是也不能让用户每个都清理缓存啊；
于是就要配合第一种解决方法，在菜单链接后面加参数，这样用户侧会重新load新版本的html（微信菜单设置发布后，有将近10分钟的延时），这样配合使用就完美解决了我们的问题；
期间多次尝试发现，微信的缓存策略和页面地址的后缀参数相关，使用相同的后缀，在不设置缓存策略下，就能回到对应的版本，很强大，也很鸡肋
㈧ 如何给html网页设置缓存
在Apache环境下，可以通过在.htaccess文件中添加下面的代码，设置图片的HTTP缓存和有效期（需要开启apache的headers模块支持）：
# Image and Flash content Caching for ONE Year blog.gimhoy.com<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$"> Header set Cache-Control "max-age=3156000"
其中max-age后面这个数字就是设置的缓存有效期（以秒为单位），比如上面的代码设置了网站的图片使用为期一年（3156000秒）的HTTP缓存。
在Nginx下，可以通过修改nginx.conf配置文件，来修改缓存设置：
location ~* \.(flv|gif|jpg|jpeg|png|ico|swf)$ { expires 1y; access_log off; break; }
同样的方法，你也可以给js和css文件设置缓存。
㈨ 请教高手，html页面中的图片，如何让浏览器缓存至本地
可能对方设置的网页就已经禁止缓存了。大概是因为它们更新速度比较快的缘因
㈩ html5 如何更新离线缓存
需要服务器。这里用tomcat服务器来讲解。
首先要先把.manifest后缀的文件 的mine类型配置为text/cache-manifest。
一讲到tomcat配置，熟悉的朋友自然就会想到web.xml这个文件，没错，在文件中加入如下配置就行：
1 <mime-mapping>
2 <extension>manifest</extension>
3 <mime-type>text/cache-manifest</mime-type>
4 </mime-mapping>
然后写一个xxx.manifest文件，xxx是你自己取的一个名字。这个文件的格式是这样的：
CACHE MANIFEST
#version 1.5
CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif
第一行是必须的，它标识这是manifest的配置文件。
#version 1.5
这句是注释，没实际的作用，我在这里只是想让浏览器更新缓存文件。因为当这个manifest文件与原来一样的时候，浏览器是不会去重新加载缓存文件的，所以我们可以通过这个注释，一方面修改版本号，另一方面让浏览器更新缓存。
CACHE:
这行指示出下面的文件是要缓存的。示例中，缓存了当前页面：MyTest.html，以及一些css和js文件 还有图片。
还有几个关键字示例中没提到，就是
NETWORK:
FALLBACK:
NETWORK 指不想缓存的页面；FALLBACK 是指请求的文件 没有找到或该文件的服务器没有响应时的替代方案，比如我们想请求某个嵌套页面，但这个页面的服务器连接不上了，那么我可以转向另外一个指定的页面。
这是第二步，第三步，只要在<html>标签中加上manifest的位置就行了：
<html manifest="NAME.manifest">
到这里，就可以实现简单的离线应用了。
那些缓存的文件放在哪呢？
在chrome上测试，发现它是按自己的机制来分块保存这些文件的，所以我没找不到完整的文件。保存的数据在：
C:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 里面，具体怎么存，笔者还不了解。
火狐上的文件也是按它自己的机制来存的，不过笔者本人用sqlite打开后，找到了缓存文件的具体信息：