首页 > 开发 > HTML5 > 正文

HTML5离线应用与客户端存储的实现

2024-09-05 07:22:30
字体:
来源:转载
供稿:网友

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

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

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

离线检测

要知道设备是否在线还是离线,HTML5 定义了一个 navigator.onLine 属性,这个属性值为 true 表示设备能上网,值为 false 表示设备离线。

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

由于 navigator.onLine 存在一定的兼容性问题,因此除了 navigator.onLine 属性之外,为了更好地确定网络是否可用,HTML5 还定义了两个事件 online 和 offline。

当网络在离线和在线之间切换时在 window 对象上触发这两个事件:

window.addEventListener('online', function() {    // 正常工作});window.addEventListener('offline', function() {    // 执行离线状态时的任务});

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

应用缓存

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

CACHE MANIFEST# Commentfile.jsfile.css

然后在 html 中引用:

<html manifest="./xxx.manifest">

xxx.manifest 文件的 MIME 类型必须是 text/cache-manifest。

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

  • 0: 无缓存,即没有与页面相关的应用缓存
  • 1: 闲置,即应用缓存未得到更新
  • 2: 检查中,即正在下载描述文件并检查更新
  • 3: 下载中,即应用缓存正在下载描述文件中指定的资源
  • 4: 更新完成,即应用缓存已经更新了资源,而且所有资源都已下载完毕,可以通过 swapCache() 来使用了
  • 5: 废弃,即应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存

相关事件:

  • checking: 在浏览器为应用缓存查找更新时触发
  • error: 在检查更新或者下载资源期间发生错误时触发
  • noupdate: 在检查描述文件发现文件无变化时触发
  • downloading: 在开始下载应用缓存资源时触发
  • progress: 在文件下载应用缓存的过程中持续不断地触发
  • updateready: 在页面新的应用缓存下载完毕且可以通过 swapCache() 使用时触发
  • cached: 在应用缓存完整可用时触发

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

数据存储

Cookie

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

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

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

GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

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

完整的 cookie 包括:

  1. 名称: 一个唯一确定 cookie 的名称。必须被 URL 编码。
  2. 值: 存储在 cookie 中的字符串值。必须被 URL 编码。
  3. 域: cookie 对于哪个域是有效的。
  4. 路径: 对于指定域中的那个路径,应该向服务器发送 cookie。
  5. 失效时间: 表示 cookie 何时应该被删除的时间戳。
  6. 安全标志: 指定后,cookie 只有在使用 SSL 连接的时候才发送到服务器。


复制代码
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表