轩枫阁

首页 / Web前端 / HTML / H5离线存储二——离线Web应用详解

H5离线存储二——离线Web应用详解

离线Web应用

离线Web应用指的是在浏览器处于离线的状态下依然能正常打开已经进行应用程序缓存的程序。

应用点

如时钟、可离线游戏等,可以在直接在本地运行。可使用localStorage来存储应用数据,在有网络的情况下再将游戏的最高分上传至服务器,实现多设备共享数据。

有一个典型的案例,就是stackedit在线markdown编辑器(文章介绍),程序将文本使用localStorage存储起来,离线状态下照常可编辑;当在线的时候,可以将文本同步至如Google Drive,实现多设备共享,非常优秀的作品。

是否在线

为了在离线状态下可用,需要知道Web应用当前是离线还是在线状态,同时当网络连接的状态发生改变时也能感知到。通过navigator.online属性,可以检测浏览器是否在线。同时,在windows对象上注册在线和离线事件的处理程序,可以检测网络连接状态的改变。

例子解析

通过一个简单的记事本程序——PermaNote,来解释如何使用。程序将用户的文本保存到localStorage中,并且在网络连接可用的时候,将其上传到服务器,PermaNote只允许用户编辑单个笔记。

PermaNote应用包含3个文件,一个应用清单文件、一个html页面文件,一个实现逻辑的js文件。

Demohttp://xuanfengge.com/demo/201506/appcache/permanote.html

1. permanote.appcache

2. permanote.html

3. permanote.js

status()函数用于显示状态栏消息,save()函数将笔记本保存到服务器,sync()用于确保本地与服务器文本的同步。

应用程序的时间处理程序解释:

onload

尝试和服务器同步,一旦有新版本的笔记并且完成同步后,就启用编辑器窗口。

save()和sync()函数发出HTTP请求,并在XMLHttpRequest对象上注册一个onload时间处理程序来获取上传或者下载完成的提醒。

onbeforeunload

在未上传前,把当前版本的笔记数据保存到服务器上。

oninput

每当textarea输入框内容发生变化时,都将其内容保存到localStorage中,并启动一个计时器。当用户停止编辑超过5秒,将自动把数据保存到服务器。

onoffline

当浏览器进入离线状态时,在状态栏显示离线消息。

ononline

当浏览器回到在线状态时,同步服务器,检查是否有新版本的数据,并且保存当前版本的数据。

onupdateready

如果新版本的应用已缓存,则在状态栏展示消息告知用户。

onnoupdate

如果应用程序缓存没有发生变化,则同时用户仍在运行当前版本。

 

121/470
123/470

相关阅读

文章评论

  • 感觉需要很高的技巧

  • 感谢你的教程

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子