大家好，我是IT修真院深圳分院第02期学员孙剑立，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网CSS任务15中有关HTML5的离线储存怎么使用？
1.背景介绍
HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
2.知识剖析
什么是Manifest：
其实Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。
Manifest 的特点：
离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。
如何使用:
创建一个和html同名的manifest文件，比如页面为text.html，那么可以建一个test.appcache的文件，注意，这里的扩展名是任意的。然后给text.html的html标签添加如下属性即可：
<html manifest="test.appcache">
manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。
接下来详细说说manifest的细节，一个典型的manifest文件代码结构像下面这样：
这个文件中存储了服务器希望缓存的文件列表:
CACHE MANIFEST
#上面一句必须
#v1.0.1
#需要缓存的文件
CACHE:
test.html
test.js
doraemon.jpg
#不需要缓存的文件
NETWORK:
test.css
#无法访问页面
FALLBACK:
404.html
以#号开头的是注释，可以是版本号，时间戳等等。一般会在这写个版本号，用来在缓存的文件更新时，更改manifest的作用：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即使你的代码发生了更新，本地浏览器也是不知道的，所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间，告诉浏览器相应的更新本地缓存。
2.更新缓存:
在有网时，以下条件触发缓存的更新
用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存
3.常见问题
离线存储有什么优缺点？
优点
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
缺点
更新的资源，需要二次刷新才会被页面采用
不支持增量更新，只有manifest发生变化，所有资源全部重新下载一次
缺乏足够容错机制，当清单中任意资源文件出现加载异常，都会导致整个manifest策略运行异常
5.编码实战
6.扩展思考
存储网页数据的方式？
localStorage - 没有时间限制的数据存储(永久),对于同一个浏览，当用户关闭浏览器窗口后，数据不会被删除。
sessionStorage - 针对一个 session 的数据存储(sesion/),当用户关闭浏览器窗口后，数据会被删除。
cookie：不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
7.参考文献
参考一:慕课网-manifest
参考二:MDN-manifest
参考三:知乎-关于前端缓存优化，为什么没人用manifest？
8.更多讨论
浏览器对离线存储的大小有限制吗？
其他的离线存储各自应该在什么情况下使用？
除了这些还有其他能实现离线存储的方式吗？
ppt链接：PPT
视频链接：视频
鸣谢
感谢大家观看
BY : 孙剑立-肖浩宇
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
请点击链接【修真院】
网友评论