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 事件