html5离线保存需要联网吗,HTML5的离线储存怎么使用？

大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的。

它是浏览器自己的一种机制，随着移动互联网时代的到来，网络可靠性降低，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。

而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

2.知识剖析

什么是Manifest：

其实Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。

Manifest 的特点：

离线浏览：即当网络断开时，可以继续访问你的页面。

访问速度快：将文件缓存到本地，不需每次都从网络上请求。

稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。

3.常见问题

离线存储有什么优缺点？

优点

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

缺点

更新的资源，需要二次刷新才会被页面采用

不支持增量更新，只有manifest发生变化，所有资源全部重新下载一次

缺乏足够容错机制，当清单中任意资源文件出现加载异常，都会导致整个manifest策略运行异常

4.解决方案

5.编码实战

6.扩展思考

存储网页数据的方式？

localStorage - 没有时间限制的数据存储(永久),对于同一个浏览，当用户关闭浏览器窗口后，数据不会被删除。

sessionStorage - 针对一个 session 的数据存储(sesion/),当用户关闭浏览器窗口后，数据会被删除。

cookie：不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

7.参考文献

8.更多讨论

浏览器对离线存储的大小有限制吗？

其他的离线存储各自应该在什么情况下使用？

除了这些还有其他能实现离线存储的方式吗？

鸣谢

感谢大家观看

BY

孙剑立-肖浩宇-杨刚

课后问答：

1.浏览器跟踪时清除了缓存是否能取消跟踪？

答：能，这里的缓存其实不是manifest，而是cookie，清除缓存后，cookie被清除。

2.：cookie有哪些优点？

答：他的缺点来自于他的优点，因为cookie会跟踪浏览器发送http请求，所以通过它可以实现用户身份认证等一系列功能，也是因为这样频繁的发送cookie，占用了带宽。

3.manifest怎么用？

http://www.w3school.com.cn/html5/html_5_app_cache.asp

ppt链接：https://ptteng.github.io/PPT/PPT/css-15-Html5%20offline%20storage.html

密码: va8q

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！