html本地缓存
① html 页面怎么对缓存进行设置
根据服务器系统环节的不同设置方法不一样
1、在Apache环境下
可以通过在.htaccess文件中添加下面的代码，设置图片的HTTP缓存和有效期（需要开启apache的headers模块支持）：
#.gimhoy.com<FilesMatch".(flv|gif|jpg|jpeg|png|ico|swf)$">HeadersetCache-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中,新增加了什么,用于实现本地数据的缓存
h5新增localStorage和sessionStorage两种用于把数据存储在本地的方法，前者可以将数据永久保存在本地，可手动删除。后者只能在本次浏览器启动时存储有效，关闭浏览器之后存储的数据会自动清空。
③ 关于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 来判断文件是否已经更新。
④ 如何区别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
⑤ html5的web存储中对于本地缓存是怎么解决的
html5对于本地缓存支持力度大大增加,支持Local Storage和Session Storage键值对存储方式,对于大数据处理HTML5支持Web SQL Database数据库
以下介绍一种常用的Local Storage键值对存储方式
设置缓存：
window.localStorage.setItem(name,val);
读取缓存：
window.localStorage.getItem(name);
删除缓存：
deletewindow.localStorage.name;
⑥ 请教高手，html页面中的图片，如何让浏览器缓存至本地
方法很简单，你把保留网页历史的时间改长而且加大缓存目录的体积就行了，方法就是看浏览器顶部，工具，internet选项，这个界面有历史长度，最多999天，看里面的“设置”，可以改保存网页的路径，以及体积大小。在历史时间内，比如30天，不需要再次缓存页面，但是有个问题，就是你如果在线听歌，看大图片，如果过多，会导致你的IE缓存很庞大，有可能超出你的IE默认的体积，所以你最好转移到非系统分区，而且设置体积很大，1G甚至更大，否则超出后默认删除早期的图片，歌曲，flash等文件。
⑦ HTML5应用程序缓存Application Cache详解
什么是Application Cache
HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。
Application Cache带来的三个优势是：
① 离线浏览
② 提升页面载入速度
③ 降低服务器压力
而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响
离线存储技术
HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景;传统还有离线存储技术为Cookie。
经过实践我们任务localstorage应该存储一些非关键性ajax数据，做锦上添花的事情;
Application Cache用于存储静态资源，缓银仍然是干锦上添花的事情;
而cookie只能保存一小段文本(4096字节);所以不能存储大数据，这是cookie与上述缓存技术的差异之一，而因为HTTP是无状态的，服务器为了区分请求是否来源于同一个服务器，需要一个标识字符串，而这个任务就是cookie完成的，这一段文本每次都会在服务器与浏览器之间传递，以验证用户的权限。
所以Application Cache的应用场景不一样，所以使用也不一致。
Application Cache简介
Application Cache的使用要做两方面的工作：
① 服务器端需要维护一个manifest清单
② 浏览器上只需要一个简单的设置即可
#p#副标题#e#
以例子做说明：
CACHE MANIFEST
CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
NETWORK:
# 不需要缓存的
4.jpg
FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg
复制代码
首先我这里报了一个错：
Application Cache Error event: Manifest fetch failed (404)
这个错误的原因是：manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置，不同的服务器不一样
APPLICATIONCACHE
01.js
02.js
1.jpg
2.jpg
3.jpg
4.jpg
demo.appcache
index.html
style1.css
style2.css
web.config
zepto.js
这样一来便可以离线应用了，这个时候就算断网了，那些文件依旧能访问
这里有一点值得注意，比如这里不带/index.html他会将“applicationcache/”缓存，其实这个就是index.html
manifest 文件可薯哪槐分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连数友接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
如图所示，HTML5定义了几个事件点，但是我们一般不会主动使用js去操作什么，大多数情况下，我们完全依赖浏览器的处理即可。
#p#副标题#e#
尺寸限制
Application Cache的尺寸限制统一在5M，我这里做一个测试：
如所示，两个css文件依旧超过了5M这个时候
Document was loaded from Application Cache with manifest
index.html:1 Application Cache Checking event
index.html:6 GET
index.html:1 Application Cache NoUpdate event
index.html:11 GET
index.html:12 GET
如所示，style2已经不能缓存了，这个会造成什么问题呢?
比如我A频道维护了自己的Application Cache，B频道也维护了自己的，这个时候A频道如果使用达到了一个峰值，会导致B频道所有的缓存失效，所以：
建议Application Cache，存储公共资源，不要存储业务资源
一些问题
由更新机制来说，首次更新manifest时，因为页面加载已经开始甚至已经完成，缓存更新尚未完成，浏览器仍然会使用过期的资源;浏览器是当Application Cache有更新时，该次不会使用新资源，第二次才会使用。这个时候update事件中执行window.reload事件。
window.applicationCache.addEventListener(updateready, function(){
window.location.reload()
});
由上例可以知道，缓存的不只是显示定义的文件，比如上例中的applicationcache/时便会默认保存index.html为映射的数据，并且包含demo.appcache文件，很多时候会遇到一次文件更新线上老是不更新，这个时候随便在manifest配置文件中做一点修改即可更新。
从可用性与易用性来说，Application Cache是值得使用的，但是最好是做静态资源的缓存，真正要实现离线应用还得花更多的功夫呢!
⑧ 请教高手，html页面中的图片，如何让浏览器缓存至本地
方法很简单，你把保留网页历史的时间改长而且加大缓存目录的体积就行了，方法就是看浏览器顶部，工具，internet选项，这个界面有历史长度，最多999天，看里面的“设置”，可以改保存网页的路径，以及体积大小。在历史时间内，比如30天，不需要再次缓存页面，但是有个问题，就是你如果在线听歌，看大图片，如果过多，会导致你的IE缓存很庞大，有可能超出你的IE默认的体积，所以你最好转移到非系统分区，而且设置体积很大，1G甚至更大，否则超出后默认删除早期的图片，歌曲，flash等文件。