【html5】html5离线存储

时间:2024-01-06 19:17:32

html5本地存储之离线存储

1.为什么使用离线存储

①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大,

它的作用是:在用户没有与因特网连接时,照样可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据,是我们的网站的适应性和应用型更强

2、准备工作

1.服务器配置

1.需要在 apache配置文件加:
① AddType text/cache-manifest .manifest

2.创建缓存清单文件xxx.manifest

格式如下

CACHE MANIFEST
####
CACHE:
01.html
1.css
1.js
NETWORK:
1.jpg
FALLBACK:

解释如下

① CACHE MANIFEST
# 这一句必须存在,而且必须放在头部
②CACHE
# 这一句指明要缓存的内容
③NETWORK
# 声明用于指定无需缓存的文件
④FALLBACK
#这个声明允 许你在资源不可用的情况下,将用户重定
向到特定文件

3.客户端文件配置

<html manifest="xxx.manifest">

将文件关联到html文件中。这样当第一次访问的时候,就会在缓存到本地。即使在断网的情况下,也能访问到缓存清单中要缓存的内容

4.更新缓存

浏览器发现缓存清单文件没有更改 则不会重新缓存。需要更改缓存文件 得以生效,获得通过javascript修改

5.在线状态监测

HTML5 提供了两种检测是否在线的方式:navigator.onLine 和 online/offline 事件。
1.navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线;如果为 false, 表示离线
2.开发者还需要在网络状态发生变化时立刻得到通知,因此 HTML5 还提供了 online/offline 事件