当前位置：文档之家 › HTML5离线应用和离线存储的调研报告v1.0(双十二,双蛋,天猫伊语衣颜)

HTML5离线应用和离线存储的调研报告v1.0(双十二,双蛋,天猫伊语衣颜)

  • 格式：doc
  • 大小：24.55 KB
  • 文档页数：5

HTML5离线应用和离线存储
第一章 离线应用机制
一、基础知识描述
如果要对离线应用的机制进行实际的开发，需要对离线机制的原
理和api有一些理解，并且还有他的事件机制，可以帮助我们自
动和检测更新。比较重要的几点：
1.离线应用需要服务器的支持，只有在服务器允许的情况下才能
做离线应用
2.离线应用需要一个描述文件，这个文件描述了哪些文件被缓存，
哪些文件不被缓存等一些相关的信息
3.离线应用有自己相关的事件和api，需要好好的理解，通过对事
件的监听，就可以完成比较强大的离线应用。

 描述文件：
一个文本文件，第一行必须为CACHE MANIFEST，这个应该是一种标
识，他告诉浏览器这是一个离线描述文件，告诉浏览器什么文件
该缓存什么不该缓存，例如：
CACHE MANIFEST 󰀀
a.html 󰀀
b.css
c.js

他告诉浏览器要缓存a.html,b.css,c.js等文件󰀀
 事件：
事件源为applicationCache，通过监听这个对象的某一些事件，
来实现对离线机制的实现。事件描述如下：
Cached：更新已经完成，并且存储，只在第一次下载缓存成功后
的调用
Checking:获取版本信息，并检查manifest，无论什么时候都会
触发的事件
Downloading:开始下载新的资源，只要需要下载资源则会触发本
事件
Error：当获取manifest失败服务器端发生错误时，发生此事件
Noupdate:没有更新
Updateready：更新完成可以启用新的缓存,第二次更新完成后的
调用
Progress:浏览器在下载过程中可以监听下载的过程和进度，从事
件中还可以获取下载完成了几个文件。

 Api:
调用javascript的api更新程序
if (window.applicationCache.status ==
window.applicationCache.UPDATEREADY) ｛
window.applicationCache.update();
｝
切换缓存：
applicationCache.swapCache();本方法不会更新页面内容，需
要调用 location.reload();才能更新页面。
二、实例描述
实例名称：
一个简单的离线应用
实例条件：
 熟悉Dreamweaver
 离线应用相关知识
实现过程：
建立mainf.html
写入html和js代码并预览
三、技术价值
离线应用的技术价值在于：
 当用户离线时可以浏览想要的内容，提高应用的可用性
 只下载需要的文件资源，降低对服务器的压力
第二章 离线存储
一、基础知识描述
HTML5两种本地存储机制：
 DOM storage
 web sql Database
DOM storage提供一种key-value的存储方式，更方便的操作
数据。
Web sql Database 提供一种简单的关系型数据的操作数据的
方式。

DOM storage分两种：
sessionStorage只在窗口打开时有效，当浏览器窗口关闭时将
失效
localStorage用于长期存储数据，所有浏览器都可以共享
localStorage。

Web sql database是一个好东西，他支持事物和最基本的关系
型数据库的操作，就算多浏览器操作也不会使数据发生异常。在实际
的应用场景中，离线时，我们可以把数据先存储到本地然后更新到服
务器。

二、实例描述
实例名称：
一个简单的 DOM storage例子
实例条件：
 熟悉dreamweaver
 DOM storage相关的知识
 网页相关知识
实现过程：
建立storage.html
写入js代码并预览
三、技术价值
 提高可用性，在离线状态也能支持数据操作
 降低服务器资源

合集下载

基于HTML5的离线存储技术

基于HTML5的离线存储技术

基于HTML5的离线存储技术作者：霍冰鹏来源：《十堰职业技术学院学报》2013年第02期摘要：HTML5是W3C的新标准，不仅提升了Web页面的性能，也有很多的API接口，开发人员使用这些接口，可以很容易地创建更丰富的Web程序。

利用HTML5离线存储技术，使用DOM存储和Web SQL Database存储机制可以开发离线的Web应用程序。

关键词：Web；HTML5；离线；DOM Storage中图分类号：TP393.09 文献标识码：A文章编号：1008-4738（2013）02-0103-040引言随着HTML5[1]技术发展迅速，在HTML 5平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。

HTML功能越来越丰富，支持图片上传拖拽、支持Localstorage、支持Web SQL Database、支持文件存储Api等等。

致力于将Web带入一个更为成熟的应用平台，本文介绍HTML 5的离线缓存[2]Web应用的功能。

离线存储的三大核心功能作用：离线资源缓存需要一种方式来指明应用程序离线工作时所需的资源文件。

这样，浏览器才能在在线状态时，把这些文件缓存到本地。

此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。

HTML5 中，通过 Cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存[3]更新方式。

在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。

在 HTML5 中，提供了两种检测当前网络是否在线的方式。

本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。

为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制[4][5]。

前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。

HTML5+CSS3网页设计基础教程第8章 离线应用程序

HTML5+CSS3网页设计基础教程第8章 离线应用程序


HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第19页
8.3.2 applicationCache对象的 事件



applicationCache对象除了具有update方法和 swapCache方法外，还有一系列的事件: checking事件 error事件 downloading事件 cached事件 noupdate事件 updateready事件

Python的配置:
打开PYTHON_HOME/Lib/mimetypes.py文件并添加一 行代码： '.manifest':'text/cache-manifest manifest';
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第12页
8.2.2 manifest文件结构与含义


8.2.1 8.2.2 8.2.3 8.2.4
Web服务器配置 manifest文件结构与含义 搭建离线应用程序 离线应用中浏览器和服务器交互过程
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第11页
8.2.1 Web服务器配置

本节主要以常用的Web服务器Apache和Python 举例进行配置。 Apache:
第8章 离线应用程序
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础教程
第8章 离线应用程序
第1页
本章概述


HTML5应用不需要始终保持与网络连接，目前主流浏览 器的最新版本都提供了HTML5缓存技术的支持。HTML5 提供了一个本地缓存使用的API——ApplicationCache， 使用这个API，可以实现离线Web应用程序的开发。 HTML5离线缓存的核心应用是：在用户没有与因特网连 接时，依然能够访问站点或应用；当用户和因特网连接时， 自动更新缓存数据。 离线缓存包含了两部分内容：manifest缓存清单和 JavaScript接口。其中，manifest缓存文件包含了一些需 要缓存的资源清单；JavaScript接口提供了用于更新缓存 文件的方法以及对缓存文件的操作。
跟我学HTML5本地存储技术及应用实例

跟我学HTML5本地存储技术及应用实例


（3）setItem()为指定名称的数据赋值 如果赋值的key已经存在将会覆盖该key所对应的值，如果 不存在该key，则新建一个新的项。如下为实现的代码示例： localStorage.setItem("keyName ", keyValue); 如下表为localStorage对象中的主要方法的功能和定义说明。
（2）如果是自定义的数据类型（如对象类型），则需要开发人 员在相关的对象中自定义toString()函数以返回目标数据值或 者将数据转换为JSON字符串进行存储，然后再将所获得的JSON 字符串进行数据格式的转换。
因此，可以应用JSON.stringify()函数将JavaScript对象 转换为JSon字符串,在应用中只需要直接保存JSon字符串，然 后再在另一个页面在读出JSon字符串，并应用JSON.parse()将 JSon字符串转换为JavaScript对象。
9、应用本地存储技术实现的页面访问计数器的应用示例
（1）HTML Web 页面示例
（2）本示例在Google Chrome浏览器中的执行结果
10、本地存储中的数据对同源的页面文档具有可见性
（1）由于浏览器的同源策略，网络连接的跨域访问是不被允许 的。而所谓的同源是指： 规则（协议）、主机 号（域名、IP地址等） 和端口号、浏览器都 相同。
（5）独立的存储空间 每个域（包括子域）在客户端系统中有独立的存储空间， 各个存储空间是完全独立的，因此不会造成数据混乱。
5、HTML5本地存储API的主要功能说明及应用示例
（1）localStorage和sessionStorage成员属性 对localStorage和sessionStorage成员属性变量的使用完 全相同。 （2）检测浏览器是否支持本地存储的代码示例
利用HTML5开发安卓Android应用程序(5)

利用HTML5开发安卓Android应用程序(5)


/forum-55-1.html 三星N7100 GALAXY Note2论坛
结束
谢谢！
2011-07-16
Android游戏开发培训视频
体育游戏——疯狂足球
Android游戏开发 Android游戏开发
课程安排
开发背景 功能演示 游戏策划 开发前的准备工作 游戏的总架构 Activity类的开发 欢迎界面的开发 加载界面的开发
//扩充缓存的容量 public void onReachedMaxAppCacheSize(long spaceNeeded, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) { quotaUpdater.updateQuota(spaceNeeded * 2); }
<script type="text/javascript"> //通过id获取canvas元素 var c=document.getElementById("myCanvas"); //创建context对象 var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
NETWORK: test.cgi
CACHE: style/default.css FALLBACK: /files/projects /projects
<html manifest="clock.manifest">
HTML5离线应用的更新缓存机制
应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。 自动更新 浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化 时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。 手动更新 开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。