小课堂【萌新】

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

分享人:计翔于

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

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

2.知识剖析

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

Manifest 的特点:
离线浏览:即当网络断开时,可以继续访问你的页面。
访问速度快:将文件缓存到本地,不需每次都从网络上请求。
稳定性:做了Manifest缓存,遇到突发网络故障或者服务器故障,继续访问本地缓存。

3.常见问题

如何为网页添加离线存储功能

4.解决方案

创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,注意,这里的扩展名是任意的。然后给index.html的html标签添加如下属性即可:

manifest 标签应该包含到你需要缓存资源的页面,当第一次打开该页面时,浏览器会解析该页面中的mainfest,并缓存里面列举的资源,同时该页面也会自动会被浏览器缓存,即使该页面没有在Manifest中列出。

接下来详细说说manifest的细节,一个典型的manifest文件代码结构像下面这样:

以#号开头的是注释,可以是版本号,时间戳等等。一般会在这写个版本号,用来在缓存的文件更新时,更改manifest的作用:浏览器已经缓存下来的缓存,只有当manifest文件发生了改变才会更新本地缓存,即使你的代码发生了更新,本地浏览器也是不知道的,所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间,告诉浏览器相应的更新本地缓存。

5.编码实战

demo

6.扩展思考

如何更新缓存

  • 更新manifest文件
  • 通过javascript操作
  • 清除浏览器缓存

7.参考文献

参考一:H5离线缓存技术
参考二:火狐开发者论坛

8.更多讨论

还有实现离线储存的方式吗

鸣谢

感谢大家观看

By 计翔于