大家好，我是IT修真院北京分院第20期的学员王野，一枚正直纯洁善良的程序员
今天给大家分享一下，修真院官网JS任务4，深度思考中的知识点——H5的离线储存
一、背景介绍
HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
它是浏览器自己的一种机制，随着移动互联网时代的到来，网络可靠性降低，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。
而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。
二、知识剖析
什么是Manifest：
其实Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。
Manifest 的特点：
离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。
三、常见问题
如何为网页添加离线存储功能？
四、解决方案
创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，注意，这里的扩展名是任意的。然后给index.html的html标签添加如下属性即可：
写法
manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。
接下来详细说说manifest的细节，一个典型的manifest文件代码结构像下面这样：
文件结构
以 # 号开头的是注释，可以是版本号，时间戳等等。一般会在这写个版本号，用来在缓存的文件更新时，更改manifest的作用：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即使你的代码发生了更新，本地浏览器也是不知道的，所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间，告诉浏览器相应的更新本地缓存。
五、拓展思考
如何更新缓存
更新manifest文件
通过javascript操作
清除浏览器缓存
之前说过，#号之后的注释可以是版本号，这个版本号使我们开发人员自己规定的，因为浏览器会不比较文件中的改变，只会将文件呈现给用户，但是在每次加载页面的时候都会对写好的版本号与本地缓存的版本号进行对比，如果发现与缓存的不一致，就会重新缓存配置好的缓存文件。
还有就是使用js的代码进行更新，
js写法
H5的离线存储怎么使用
六、参考文献
七、更多讨论
还有实现离线储存的方式吗
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论