HTML5中离线应用与客户端存储的示例

　　介绍

这篇文章主要介绍HTML5中离线应用与客户端存储的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

支持离线网络应用开发是HTML5的另一个重点。所谓离线网络应用,就是在设备不能上网的情况下仍然可以运行的应用。

开发离线网络应用需要几个步骤。首先是确保应用知道设备是否能上网,以便下一步执行正确的操作,然后,应用还必须能访问一定的资源(图像,Javascript、CSS等),只有这样才能正常工作。最好,必须有一块本地空间用户保存数据,无论能否上网都不妨碍读写。

HTML5及其相关的API让开发离线应用成为现实。

<强>离线检测

要知道设备是否在线还是离线,HTML5定义了一个导航器。在线属性,这个属性值为真表示设备能上网,值为假表示设备离线。

if  (navigator.onLine), { 　　,,,//,正常工作 　　},{else  　　,,,//,执行离线状态时的任务 　　}

由于导航器。在线存在一定的兼容性问题,因此除了导航。在线属性之外,为了更好地确定网络是否可用,HTML5还定义了两个事件> window.addEventListener(& # 39;在线# 39;,,()函数,{ 　　,,,//,正常工作 　　}); 　　window.addEventListener(& # 39;离线# 39;,,()函数,{ 　　,,,//,执行离线状态时的任务 　　});

在实际应用中,最好在页面加载后,最好先通过领航员。在线取得初始的状态,然后通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时,导航器。在线属性的值也会改变,不过必须要手工轮询这个属性才能检测到网络状态的变化。

<强>应用缓存

HTML5的应用缓存(应用程序缓存),或者简称为appcache,是专门为开发离线网络应用而设计的.Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据,可以使用一个描述文件(清单文件),列出要下载和缓存的资源。描述文件示例:

CACHE 清单 　　#,评论 　　file.js 　　文件。css

然后在html中引用:

& lt; html 清单=啊?xxx.manifest"在

xxx。清单文件的MIME类型必须是文本/缓存清单。

该API的核心是applicationCache对象,这个对象有一个状态属性,属性的值是常量,表示应用缓存的如下当前状态:

<李>

0:无缓存,即没有与页面相关的应用缓存

<李>

1:闲置,即应用缓存未得到更新

<李>

2:检查中,即正在下载描述文件并检查更新

<李>

3:下载中,即应用缓存正在下载描述文件中指定的资源

<李>

4:更新完成,即应用缓存已经更新了资源,而且所有资源都已下载完毕,可以通过swapCache()来使用了

<李>

5:废弃,即应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

相关事件:

<李>

检查:在浏览器为应用缓存查找更新时触发

<李>

错误:在检查更新或者下载资源期间发生错误时触发

<李>

noupdate:在检查描述文件发现文件无变化时触发

<李>

下载:在开始下载应用缓存资源时触发

<李>

进步:在文件下载应用缓存的过程中持续不断地触发

<李>

updateready:在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发

<李>

缓存:在应用缓存完整可用时触发

一般来讲,这些事件会随着页面加载按上述顺序依次触发。也可以通过调用更新()方法手动触发上述事件。

<强>数据存储

<强>饼干

HTTP Cookie,通常直接叫做饼干,是在客户端用于存储会话信息的。该标准要求服务器对任意HTTP请求发送set - Cookie HTTP头信息作为响应的一部分,其中包含会话信息。服务器响应头示例:

HTTP/1.1 200 OK
- type: text/html
set - Cookie: name=价值
其它报头:other-header-value

然后浏览器set - Cookie的会话信息,之后为每个请求添加饼干HTTP头将信息发送回服务器,如下所示:

/索引。html HTTP/1.1
饼干:name=价值
其它报头:other-header-value

发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个请求。

完整的饼干包括:

<李>

名称:一个唯一确定饼干的名称。必须被URL编码。

<李>

值:存储在Cookie中的字符串值。必须被URL编码。

HTML5中离线应用与客户端存储的示例