标签：文件 储存 缓存 浏览器 离线 存储 manifest HTML5

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能，本篇分享的是：

【HTML5的离线储存怎么使用？】

HTML5的离线储存怎么使用？

大家好，我是IT修真院西安分院第5期的学员许恒倩，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网CSS任务十五，深度思考中的知识点——HTML5的离线储存怎么使用？

（1）背景介绍：

HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，
在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，
但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。
它是浏览器自己的一种机制，随着移动互联网时代的到来，网络可靠性降低，如果我们已经将需要的文件缓存下下来，一旦网络无法访问，也能继续访问。
而且做好相应资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

（2）知识剖析：
1.原理：

HTML5的离线存储是基于一个新建的.manifest文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，
这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

2.什么是manifest文件

Manifest是一个简单的 文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。
Manifest 的特点：
离线浏览：即当网络断开时，可以继续访问你的页面。
访问速度快：将文件缓存到本地，不需每次都从网络上请求。
稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存

（3）常见问题：
如何使用离线存储

（4）解决方案：

    1）页面头部像下面一样加入一个manifest的属性。    

    2）在cache.manifest文件的编写离线存储的资源。

以#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，
更新manifest以实现浏览器重新下载新的文件，可以是版本号，时间戳或md5码等。

离线存储的manifest一般由三个部分组成：
①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。
不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他

（5）编码实战：

html

我是文字

demo.manifest

CACHE MANIFEST
#v0.11
#需要缓存的文件
CACHE:
demo.html
http.JPG
k.PNG
#不需要缓存的文件
NETWORK:
demo.css
#无法访问的页面
FALLBACK:
404.html

（6）拓展思考：
如何更新缓存？

①　更新manifest文件
    1)给manifest添加或删除文件。
    2)若manifest没有添加或删除文件，只是修改了文件，可以通过更改版本号等更新manifest文件。



②　通过javascript操作
    html5中引入了js操作离线缓存的方法：window.applicationCache.update()，可以手动更新缓存。

③　清除浏览器缓存
    如果用户清除了浏览器缓存（手动或用其他一些工具），都会重新下载文件。

（7）参考文献：
参考：
有趣的HTML5：离线存储
浅谈HTML5离线存储

（8）更多讨论：
Q1：h5还有哪些存储方式？

Q2:浏览器对于存储的大小有限制吗？

Q3:离线存储有什么优缺点？

A1：

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

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

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

A2:

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

A3:

优点：

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

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

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

缺点：

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

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

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

（9）结束语：

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

标签：文件,储存,缓存,浏览器,离线,存储,manifest,HTML5
来源： https://blog.csdn.net/learning_web/article/details/99689032

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。